@include export-module('cc-transaction-line-layout') {
  .co-transaction-line {
    font-family: $tp-transaction-line-font-family;
    font-size: $tp-transaction-line-font-size;
    width: 100%;
    min-width: 100%;
    display: flex;
    flex-direction: column;
    border: $tp-transaction-line-border;
    padding: $tp-transaction-line-padding;
    border-width: $tp-transaction-line-border-width;
    position: relative;
    &.active {
      box-shadow: 0 0 3px 2px #1a73e8a3;
      border-radius: 4px;
      border-color: #1a73e873;
    }
    .transaction-base-line-wrapper {
      column-gap: $tp-transaction-line-column-gap;
    }
    .line-start {
      width: $tp-transaction-line-start-width;
      min-width: $tp-transaction-line-start-min-width;
      max-width: $tp-transaction-line-start-max-width;
      position: relative;
    }
    .line-end {
      width: $tp-transaction-line-end-width;
      min-width: $tp-transaction-line-end-min-width;
      max-width: $tp-transaction-line-end-max-width;
      gap: $tp-transaction-line-end-gap;
      padding: $tp-transaction-line-end-padding;
      flex: 1;
      justify-content: flex-end;
    }
    .preview-margin {
      margin-left: $tp-transaction-line-column-gap;
    }
    .transaction-line {
      display: flex;
      flex-direction: column;
    }
    .transaction-base-line-section {
      .transaction-line-description {
        .description-wrapper {
          gap: $tp-transaction-line-description-wrapper-gap;
          justify-content: space-between;
        }
        .transaction-line-article-number-wrapper {
          gap: $tp-transaction-line-article-number-gap;
          font-size: $tp-transaction-line-article-number-font-size;
          align-items: center;
          padding-top: 3px;
          .delete-icon {
            height: $tp-transaction-line-article-delete-icon-size;
            width: $tp-transaction-line-article-delete-icon-size;
          }
        }
      }
    }
    .transaction-line-wrapper {
      display: flex;
      flex-direction: row;
      flex: 1;
      justify-content: space-between;
      max-width: 100%;
      width: max-content;
    }
    .transaction-line-buttons {
      display: flex;
      align-items: baseline;
      flex-shrink: 0;
      position: relative;
      height: $tp-transaction-line-amount-height;
      .transaction-field-label {
        text-overflow: clip;
        overflow: visible;
      }
      .transaction-line-column {
        display: flex;
        flex-direction: column;
      }
    }
    .transaction-field-wrapper {
      flex: 1;
      max-width: $tp-transaction-line-field-wrapper-max-width;
      min-width: $tp-transaction-line-field-wrapper-min-width;
      .inside-field {
        position: relative;
        height: 30px;
        display: flex;
        align-items: center;
        width: 100%;
        .input-text-wrapper, .input-wrapper {
          max-width: 100%;
        }
        .co-transaction-navigation-button {
          width: 100%;
        }
      }
      .disabled-button {
        opacity: 0.6;
      }
      .co-transaction-button {
        height: $tp-transaction-line-default-button-height;
        width: $tp-transaction-line-default-button-width;
        max-width: $tp-transaction-line-default-button-max-width;
        &.big {
          width: $tp-transaction-line-default-button-big-width;
          max-width: $tp-transaction-line-default-button-big-max-width;
        }
      }
      .co-input-number-picker {
        width: 100%;
        max-width: 100%;
        height: $tp-transaction-line-default-button-height;
        .co-button {
          background-color: transparent;
        }
        input {
          font-size: $tp-transaction-line-default-button-font-size;
        }
      }
      .co-transaction-line-discount-button, .co-transaction-line-vat-button {
        .co-transaction-button {
          width: $tp-transaction-line-default-button-width;
        }
      }
    }
    .transaction-line-extended-wrapper {
      display: flex;
      align-content: flex-start;
      gap: $tp-transaction-line-row-gap;
      width: 100%;
      .column-full {
        display: flex;
        gap: 5px;
        justify-content: flex-end;
        width: 100%;
        flex-wrap: wrap;
        .transaction-button-icon-wrapper {
          display: none;
        }
        .transaction-field-wrapper {
          max-width: 150px;
          min-width: 100px;
          &.small {
            max-width: 90px;
            min-width: 70px;
          }
          .co-transaction-overflow-ellipsis {
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 100%;
          }
          .co-transaction-button {
            .transaction-button-label-title-wrapper {
              align-items: center;
            }
          }
          .navigation-button-list-extended-item {
            display: flex;
            flex-direction: column;
            gap: 5px;
            width: 100%;
            .co-transaction-navigation-button {
              .transaction-button-label {
                color: #1a73e8;
                text-decoration: underline;
              }
              .transaction-button-icon-wrapper {
                display: flex;
                width: 22px;
                height: 22px;
                position: absolute;
                top: -2px;
                left: -1px;
                .spacer {
                  display: none;
                }
              }
            }
          }
          &.active {
            .co-transaction-button {
              border-color: #1A73E8;
              color: #1A73E8;
            }
            .transaction-inside-label {
              color: #1A73E8;
            }
          }
        }
      }
      co-transaction-line-delivery-date-button {
        .transaction-line-button {
          align-items: center;
        }
      }
      .co-statusbar-wrapper {
        height: $tp-transaction-line-default-button-height;
        align-items: center;
        min-width: 70px;
      }
      .co-input-text {
        height: $tp-transaction-line-default-button-height;
        width: 100%;
        input {
          padding: 0 0 0 10px;
          align-self: center;
        }
        &.read-only {
          .input-text-clear-button {
            display: none;
          }
        }
      }
      .co-dialog {
        .co-input-text {
          height: 40px;

          input {
            padding: 10px 0 0 10px;
            align-self: center;
          }
        }
        .co-dialog-header-search {
          .co-input-text {
            height: 32px;
            input {
              padding: 0 0 0 10px;
            }
          }
        }
      }
    }
    .transaction-line-totals-amount {
      .amount-number-picker, .co-input-text {
        height: 100%;
      }
    }
    .transaction-line-totals-price, transaction-line-totals-total {
      .co-input-text {
        &:before {
          box-shadow: none;
        }
      }
    }
    .transaction-line-artnr-supplier, .transaction-line-totals-price, .transaction-line-totals-discount, .transaction-line-totals-total, .transaction-line-confirmed-price, .transaction-line-purchase-price, .transaction-line-purchase-description {
      display: flex;
      align-items: center;
      justify-content: $tp-transaction-line-totals-justify-content;
      border: 1px solid $tp-transaction-line-border-color;
      border-radius: $tp-default-border-radius;
      padding: $tp-transaction-line-totals-padding;
      white-space: nowrap;
      height: $tp-transaction-line-default-button-height;
      font-weight: 600;
      font-size: $tp-transaction-line-default-button-font-size;
      max-width: $tp-transaction-line-default-button-max-width;
      width: $tp-transaction-line-default-button-width;
      .co-input-text {
        width: 100%;
        height: 100%;
        border: none;
        input {
          margin: 0;
          border: none;
        }
        &:before {
          display: none;
        }
      }
    }
    .price {
      font-weight: $tp-transaction-line-price-font-weight;
    }
    .transaction-line-purchase-price {
      width: 50%;
    }
    .transaction-line-purchase-description {
      padding: 0;
    }
    &.preview {
      .transaction-line-wrapper {
        align-items: center;
      }
    }
    &.is-text {
      min-height: $tp-transaction-line-article-text-min-height;
      justify-content: center;
    }
    &:not(.is-text) {
      .transaction-base-line-wrapper {
        justify-content: space-between;
        width: 100%;
      }
    }
    .transaction-line-stock-wrapper {
      display: flex;
      column-gap: 5px;
    }
    .transaction-line-stock {
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      row-gap: $tp-transaction-line-row-gap;
      padding: $tp-transaction-line-inner-padding;
    }
    .transaction-field-label {
      position: absolute;
      top: $tp-transaction-line-field-label-top;
      font-size: $tp-transaction-line-field-label-font-size;
      color: $tp-transaction-line-field-label-font-color;
      font-weight: $tp-transaction-line-field-label-font-weight;
      text-transform: $tp-transaction-line-field-label-text-transform;
      max-width: 100%;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    &.is-text {
      .transaction-line {
        flex-direction: row;
        min-height: $tp-transaction-line-article-text-min-height;
        column-gap: $tp-transaction-line-column-gap;
      }
    }
    &.preview {
      .transaction-line-totals {
        grid-template-rows: $tp-transaction-default-button-height;
        grid-gap: $tp-transaction-line-row-gap;
      }
    }
    &.customer-line {
      border-width: 0;
      .line-start {
        width: 33%;
        min-width: 33%;
      }
    }
  }
  .co-transaction-base-line {
    &.dragging {
      opacity: 0.7;
      border: 1px dashed #1A73E8;
      background-color: #f0f8ff;
      cursor: grabbing;
    }
  }
  @media(max-width:1440px) {
    .co-transaction-line {
      .transaction-line-section {
        flex-direction: column;
      }
    }
  }
}
