@import "../../../../style/mixin";

@include export-module('co-transaction-header-layout') {
  .co-transaction-header {
    display: block;
    font-family: $tp-co-transaction-header-font-family;
    font-size: $tp-co-transaction-header-font-size;
    cursor: pointer;
    .transaction-header-wrapper {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      position: relative;
      padding: $tp-co-transaction-header-padding;
      border: $tp-co-transaction-header-border;
      border-width: $tp-co-transaction-header-border-width;
      column-gap: $tp-co-transaction-header-gap;
      row-gap: $tp-co-transaction-header-gap;
      margin: $tp-co-transaction-header-margin;
      .co-carousel {
        width: 100%;
        .carousel-wrapper {
          padding: 5px 0;
          justify-content: space-between;
          transition: all .3s ease-in-out;
          border-radius: 0px;
          > *:not(.transaction-header-divider) {
            @include screen-mobile {
              width: 100%;
              > * {
                width: 100%;
              }
            }
          }
          > * {
            max-height: $tp-co-transaction-header-not-expanded-height;
            transition: .25s ease-in-out;
            flex: 1;
          }
        }
      }
      &.expanded {
        .co-carousel {
          .carousel-wrapper {
            > * {
              max-height: $tp-co-transaction-header-expanded-height;
              transition: .25s ease-in-out;
            }
          }
        }
        .expand-transaction-header {
          .expand-header-icon {
            transform: rotate(180deg);
          }
        }
      }
      .header-order-payment-wrapper {
        display: flex;
        justify-content: center;
        padding-right: 50px;
        &.purchase-order-payment-wrapper {
          padding-right: 70px;
        }
      }
      .transaction-header-divider {
        height: auto;
        width: $tp-co-transaction-header-divider-width;
        margin: $tp-co-transaction-header-divider-margin;
      }
    }
    .expand-transaction-header {
      width: $tp-co-transaction-header-expand-button-size;
      height: $tp-co-transaction-header-expand-button-size;
      background: $tp-co-transaction-header-expand-button-background;
      position: absolute;
      left: calc(50% - 25px);
      transform: translateX(-50%);
      bottom: $tp-co-transaction-header-expand-button-bottom;
      border-radius: $tp-co-transaction-header-expand-button-border-radius;
      cursor: pointer;
      .expand-header-icon {
        width: $tp-co-transaction-header-expand-button-icon-size;
        height: $tp-co-transaction-header-expand-button-icon-size;
      }
    }
    co-transaction-header-delivery-date {
      .input-text-wrapper {
        align-items: center;
        .input-wrapper {
          height: 100%;
        }
      }
    }
    .payment-paid {
      font-size: 11px;
    }
    //&:hover {
    //  .transaction-header-wrapper {
    //    .co-carousel {
    //      .carousel-wrapper {
    //        background: rgba(26, 115, 232, 0.05);
    //        padding: 5px;
    //        transition: all .3s ease-in-out;
    //        border-radius: 5px;
    //      }
    //    }
    //  }
    //}
    .co-transaction-header-block {
      width: auto;
      height: 100%;
      padding: 10px 8px;
    }
    .header-order-wrapper {
      &:hover {
        background: rgba(26, 115, 232, 0.05);
      }
    }
    .transaction-header-block-wrapper {
      width: 100%;
      height: auto;
    }
    .transaction-header-click {
      position: absolute;
      top: 0;
      right: initial;
      left: 0;
      padding: 3px;
      z-index: 5;
      display: none;
      border-radius: 0;
      border-width: 0;
      height: 100%;
      background: #f3f8fed6;
      align-items: center;
      box-shadow: 1px 0 5px #0000001a;
      justify-content: center;
      co-icon {
        width: 18px;
        height: 18px;
      }
    }
    .co-transaction-header-block {
      position: relative;
      justify-content: center;
      &:hover {
        .transaction-header-click {
          display: flex;
        }
      }
    }
  }
}
