@include export-module('co-dialog-transaction-line-warehouse-cc-layout') {
  .co-dialog-transaction-line-warehouse-cc {
    font-family: $tp-dialog-transaction-line-warehouse-cc-font-family;
    font-size: $tp-dialog-transaction-line-warehouse-cc-font-size;
    .co-dialog:not(.is-mobile) .co-dialog-wrapper {
      width: $tp-dialog-transaction-line-warehouse-cc-min-width;
      background-color: #fff;
      .dialog-header, .dialog-content, .dialog-footer {
        background-color: #fff;
      }
      .dialog-content {
        max-height: $tp-dialog-transaction-line-warehouse-cc-tab-content-height;
        display: flex;
        flex-direction: column;
      }
    }
    .transaction-line-warehouse-top-cc-section {
       display: flex;
       flex-direction: row;
       column-gap: 5px;
       margin: $tp-dialog-transaction-line-warehouse-cc-section-margin;
       .bordered {
        margin-left: 20px;
      }

      .unit-amount {
        height: $tp-dialog-transaction-line-warehouse-cc-quantity-height;
        max-width: 90px;
      }

      .unit-list {
        height: $tp-dialog-transaction-line-warehouse-cc-quantity-height;
        .co-input-text {
          height: $tp-dialog-transaction-line-warehouse-cc-quantity-height;
        }
      }
    }
    .transaction-line-warehouse-cc-section {
      display: flex;
      flex-direction: column;
      margin: $tp-dialog-transaction-line-warehouse-cc-section-margin;
      .checkbox-list-wrapper {
        max-height: $tp-dialog-transaction-line-warehouse-cc-section-max-height;
        &.purchase {
          max-height: 100%;
        }
      }
      .bordered {
        margin-left: 20px;
      }
      .transaction-line-warehouse-cc-warehouses-section {
        display: grid;
        grid-template-columns: 30px 39% 30px 39%;
        grid-gap: 10px;
        width: 100%;
        overflow: hidden;
        align-items: center;
      }
      &.dontShowWarehouseTab {
        display: none;
      }
    }
    .quantity-number-picker {
      width: $tp-dialog-transaction-line-warehouse-cc-quantity-width;
      height: $tp-dialog-transaction-line-warehouse-cc-quantity-height;
      .icon-wrapper{
        max-width: $tp-dialog-transaction-line-warehouse-cc-quantity-height;
      }
      .co-input-text {
        width: $tp-dialog-transaction-line-warehouse-cc-quantity-width;
        height: $tp-dialog-transaction-line-warehouse-cc-quantity-height;
        .right-icon {
          min-width: $cc-co-list-of-values-right-icon-spacer-width;
        }
        .input-text-right-icon svg {
          width: $cc-co-list-of-values-right-icon-width;
          height: $cc-co-list-of-values-right-icon-width;
          padding: $cc-co-list-of-values-right-icon-padding;
          background: $cc-co-list-of-values-right-icon-background;
          border-radius: $cc-co-list-of-values-right-icon-radius;
        }
      }
    }
    .transaction-line-warehouse-cc-section-label-wrapper {
      display: flex;
      flex-direction: column;
    }
    .transaction-line-warehouse-cc-section-label {
      font-size: $tp-dialog-transaction-line-warehouse-cc-section-label-font-size;
      font-weight: $tp-dialog-transaction-line-warehouse-cc-section-label-font-weight;
      margin: $tp-dialog-transaction-line-warehouse-cc-section-label-margin;
    }
    .transaction-line-warehouse-cc-section-checked {
      display: flex;
      gap: 5px;
      font-size: 10px;
      margin-bottom: 5px;
    }
    .co-dialog-header-wrapper {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .co-dialog-header-title-icon {
      display: flex;
      gap: 10px;
      align-items: center;
      .co-icon {
        width: 22px;
        height: 22px;
      }
    }
    .article-name {
      display: flex;
      margin-top: 5px;
    }
    .co-dialog-header-reason {
      font-size: $tp-dialog-transaction-line-warehouse-cc-reason-font-size;
    }
    .warehouse-cc-tabs {
      display: flex;
      column-gap: 10px;
      user-select: none;
      margin-bottom: 15px;
      padding-bottom: 5px;
      border-bottom: 2px solid #F4F4F9;
      .warehouse-cc-tab {
        cursor: pointer;
        position: relative;
        bottom: -7px;
        padding: 0 0 5px 0;
        margin-left: 10px;
        &.active {
          color: #1A73E8;
          font-weight: 500;
          border-bottom: 2px solid #1A73E8;
        }
      }
    }
    .warehouse-cc-tabs-content {
      display: flex;
      overflow-x: hidden;
      scroll-behavior: smooth;
    }
    .tab-content {
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      width: 100%;
    }
  }
}
