@include export-module('cc-transaction-card-layout') {
  .co-transaction-card {
    font-size: $tp-font-size;
    display: block;
    height: 100%;
    min-width: 100%;
    .transaction-card-outer-wrapper {
      width: 100%;
    }
    .co-transaction-navigation-button-list {
      flex: 2;
    }
    .transaction-field-wrapper {
      flex: 1;
      max-width: 200px;
      min-width: 100px;
      .inside-field {
        position: relative;
      }
      &.status-bar {
        max-width: 130px;
      }
      &.status-bar-purchase {
        min-width: 75px;
        max-width: 95px;
      }
      .co-transaction-button {
        width: 100%;
      }
    }
    .co-transaction-line-statusbar {
      max-width: 130px;
    }
    .transaction-card-wrapper, .co-transaction-text-line {
      background: #FFF;
      border-radius: $tp-transaction-card-border-radius;
      border: 1px solid $tp-transaction-card-border-color;
      box-shadow: $tp-transaction-card-box-shadow;
      padding: 12px;
      width: 100%;
      height: 100%;
      co-input-number-picker,
      .transaction-card-price,
      co-input-text {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid $tp-color-border;
        border-radius: 5px;
        width: auto;
        min-width: 100px;
        height: $tp-transaction-default-button-height;
        .input-text-wrapper {
          max-width: 100%;
        }
        .co-input-text {
          border: none;
          input {
            margin: 4px 0 0;
          }
        }
        &.price {
          width: auto;
          font-weight: bold;
        }
        &.warning {
          border-color: $tp-color-error;
          &:before {
            box-shadow: inset 0 0 0 1px $tp-color-error;
          }
        }
      }
      .transaction-card-content-wrapper {
        display: flex;
        width: 100%;
        flex-direction: column;
        .content-base {
          width: inherit;
          display: flex;
          gap: 5px;
          align-items: center;
          margin-bottom: 10px;
          .co-transaction-button {
            width: auto;
          }
          &.bottom-base {
            .transaction-field-wrapper {
              max-width: 25%;
              min-width: 65px;
            }
          }
        }
        .content-expanded {
          width: inherit;
          display: flex;
          gap: 5px;
          align-items: center;
          margin-bottom: 5px;
        }
        .transaction-line-confirmed-price {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          border: 1px solid #DCE4EA;
          border-radius: 5px;
          padding: 0 10px;
          font-weight: bold;
          height: 30px;
        }
        .co-transaction-line-commission-button, .co-transaction-line-supplier-button, .co-transaction-line-warehouse-button, .co-transaction-line-delivery-button, .co-transaction-line-vat-button, co-transaction-line-warehouse-location-button {
          overflow: hidden;
          .transaction-line-button, .co-transaction-button {
            width: auto;
          }
          &.fit-content {
            .big {
              width: auto;
            }
          }
        }
      }
    }
    .transaction-line-totals-price, .transaction-line-totals-discount, .transaction-line-totals-total {
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid $tp-transaction-line-border-color;
      border-radius: $tp-default-border-radius;
      height: $tp-transaction-default-button-height;
      .co-input-text {
        width: 80%;
        height: 95%;
        input {
          margin: 4px 0 0;
        }
      }
      &.card-button {
        width: auto;
        height: $tp-default-button-height;
      }
    }
    .price {
      font-weight: $tp-transaction-line-price-font-weight;
    }
    //.amount-number-picker {
    //  border: none;
    //
    //  .co-button {
    //    height: 18px;
    //    width: 20px;
    //  }
    //}
    .card-side-panel-button {
      background: #f5f5fc;
      border-radius: 5px;
      padding: 5px 2px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      .co-icon {
        width: 20px;
        height: 20px;
      }
    }
  }
}
