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

@include export-module('co-transaction-header-order-layout') {
  .co-transaction-header-order {
    display: flex;
    justify-content: flex-end;
    &.purchase-order-header {
      justify-content: center;
      .transaction-header-block-content {
        justify-content: center;
        padding-left: 20px;
      }
    }
    .transaction-header-order-dialog {
      .co-transaction-header-block {
        padding: 4px 0;
      }
      .transaction-header-block-content {
        .transaction-header-block-content-first, .transaction-header-block-content-second, .transaction-header-block-content-third {
          flex-basis: 33%;
        }
      }
    }
    .transaction-header-block-header {
      co-icon {
        position: relative;
        height: $tp-transaction-header-order-icon-size;
        width: $tp-transaction-header-order-icon-size;
      }
    }
    .header-order-total-wrapper {
      .header-order-total {
        font-weight: $tp-transaction-header-order-section-total-font-weight;
        font-size: 11px;
      }
    }
    .transaction-header-discount-button {
      cursor: pointer;
      width: $tp-transaction-header-order-discount-width;
      height: $tp-transaction-header-order-discount-height;
      .header-discount {
        display: flex;
        column-gap: $tp-transaction-header-order-discount-column-gap;
        align-items: center;
        justify-content: center;
        font-size: $tp-transaction-header-order-discount-font-size;
        border-style: $tp-transaction-header-order-discount-border-style;
        border-width: $tp-transaction-header-order-discount-border-width;
        border-radius: $tp-transaction-header-order-discount-border-radius;
        padding: $tp-transaction-header-order-discount-padding;
        background: #fff;
        height: 100%;
        box-shadow: 0px 0px 7px 2px rgba(160,160,160,0.3);
        .header-discount-icon {
          width: $tp-transaction-header-order-discount-icon-size;
          height: $tp-transaction-header-order-discount-icon-size;

        }
      }
      .spacer {
        width: 1px;
        height: 100%;
        background: $tp-transaction-header-order-discount-border-color;
      }
      &.discount-active {
        svg {
          fill: #C1002A;
        }
      }
    }
    .transaction-header-block-content-third {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .transaction-header-block-content {
      justify-content: flex-end;
      cursor: pointer;
    }
    .transaction-header-order-definitive {
      .co-input-checkbox {
        font-size: $tp-font-size;
        margin: $tp-transaction-header-order-definitive-margin;
      }
    }
    .transaction-line-button {
      flex-direction: column;
      height: 100%;
      padding: $tp-transaction-header-block-order-discount-padding;
    }

    .co-transaction-header-definitive {
      font-weight: normal;
    }

    .two-column-grid {
      display: grid;
      grid-template-areas: "firstcolumn secondcolumn";
      row-gap: $tp-transaction-header-order-default-row-gap;
      column-gap: $tp-transaction-header-order-default-column-gap;
      .first-column {
        grid-area: firstcolumn;
        grid-row: auto;
      }
      .second-column {
        grid-area: secondcolumn;
        grid-row: auto;
      }
    }
    .transaction-header-order-dialog:not(.is-mobile) {
      .co-dialog-wrapper {
        min-width: 600px;
        max-height: 80vh;
      }
    }
    .co-transaction-line-checkbox-list {
      height: 150px;
    }
    .order-dialog-section {
      display: flex;
      flex-direction: column;
      row-gap: $tp-transaction-header-order-default-row-gap;
      .section-header {
        font-family: $tp-transaction-header-order-section-label-font-family;
        font-size: $tp-transaction-header-order-section-label-font-size;
        font-weight: $tp-transaction-header-order-section-label-font-weight;
        margin: $tp-transaction-header-order-section-label-margin;
      }
    }
    .co-transaction-header-block {
      align-items: flex-end;
      justify-content: center;
      .transaction-header-block-wrapper {
        height: auto;
      }
    }
    .header-order-total-wrapper, .discount-container {
      position: relative;
      display: flex;
      height: 30px;
      align-items: center;
      border-radius: 4px;
      border: 1px solid #8083A3;
      width: 115px;
      justify-content: center;
      co-transaction-header-discount-transaction-total {
        position: relative;
        display: flex;
        justify-content: center;
        height: 30px;
        .co-transaction-label {
          z-index: 2;
        }
      }
      co-input-text {
        width: 100%;
        height: 100% !important;
        background: none !important;
        text-align: center;
        z-index: 1;
        &:before {
          display: none;
        }
        .input-text-wrapper {
          height: 100%;
          width: 100%;
          .input-wrapper {
            width: 100%;
            input {
              height: 100%;
              padding: 5px;
              text-align: center;
            }
          }
        }
      }
    }
  }
}