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

@include export-module('co-transaction-header-delivery-layout') {
  .co-transaction-header-delivery {
    display: flex;
    justify-content: flex-start;
    flex-direction: row-reverse;
    .co-transaction-header-block.in-dialog {
      padding: 4px 0;
    }
    .co-transaction-header-block {
      padding: 10px 5px 10px 15px;
      width: auto;
      .transaction-header-block-content-hidden {
        display: flex;
        gap: 10px;
      }
    }
    .planning-request-button-wrapper {
      position: relative;
      height: $tp-transaction-header-delivery-planning-request-button-size;
      width: $tp-transaction-header-delivery-planning-request-button-size;
      padding: 0;
      background: $tp-transaction-header-delivery-planning-request-button-background;
      border-style: $tp-transaction-header-delivery-planning-request-button-border-style;
      border-width: $tp-transaction-header-delivery-planning-request-button-border-width;
      border-color: $tp-transaction-header-delivery-planning-request-button-border-color;
      border-radius: $tp-transaction-header-delivery-planning-request-button-border-radius;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      .planning-request-button {
        height: $tp-transaction-header-delivery-planning-request-button-icon-size;
        width: $tp-transaction-header-delivery-planning-request-button-icon-size;
        &:after {
          content: "";
          transform: scaleX(-1) rotate(135deg);
          height: $tp-transaction-header-delivery-planning-request-button-check-height;
          width: $tp-transaction-header-delivery-planning-request-button-check-width;
          border-style: solid;
          border-width: $tp-transaction-header-delivery-planning-request-button-check-border-size;
          border-color: $tp-transaction-header-delivery-planning-request-button-check-border-color;
          right: $tp-transaction-header-delivery-planning-request-button-check-border-right;
          top: $tp-transaction-header-delivery-planning-request-button-check-border-top;
          position: absolute;
          opacity: 1;
        }
      }
    }
    .header-delivery-method .transaction-line-button {
      width: 100%;
    }
    .header-delivery-deliverydate-wrapper {
      display: flex;
      column-gap: 10px;
      align-items: center;
    }
    .header-deliverydate-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 115px;
      height: 30px;
      border: 1px solid #8083a3;
      border-radius: 4px;
    }
    .transaction-header-block-content {
      cursor: pointer;
      justify-content: flex-end;
    }
    .transaction-header-block-column {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      gap: 5px;
      padding-right: 30px;
    }
    .header-delivery-deliverydate {
      .co-input-date {
        height: $tp-transaction-header-delivery-date-input-field-height;
        padding: 0;
        .co-input-text {
          max-height: $tp-transaction-header-delivery-date-input-field-height;
          background: transparent;
          &:after, &:before, .left-icon, .input-text-left-icon, .input-text-clear-button, .right-icon {
            display: none;
          }
          .input-wrapper {
            height: auto;
          }
          input {
            padding: $tp-transaction-header-delivery-date-input-field-padding;
            max-width: $tp-transaction-header-delivery-date-input-field-width;
            line-height: $tp-transaction-header-delivery-date-input-field-line-height;
            font-size: 11px;
            text-align: center;
            font-weight: 600;
          }
          .input-text-right-icon {
            padding: $tp-transaction-header-delivery-date-input-right-icon-padding;
            margin: $tp-transaction-header-delivery-date-input-right-icon-margin;
            position: relative;
            bottom: $tp-transaction-header-delivery-date-input-right-icon-bottom;
            width: $tp-transaction-header-delivery-date-input-right-icon-width;
            height: $tp-transaction-header-delivery-date-input-right-icon-width;
            svg {
              width: $tp-transaction-header-delivery-date-input-right-icon-width;
              height: $tp-transaction-header-delivery-date-input-right-icon-width;
            }
          }
        }
      }
    }
    .transaction-header-block-content-third {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .transaction-header-partial-delivery {
      .co-input-checkbox {
        margin: $tp-transaction-header-partial-delivery-margin;
        .label {
          font-size: 11px;
          color: #171721;
        }
      }
    }
    .transaction-header-quick-buttons-wrapper {
      padding: 10px 4px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .transaction-header-block-row {
      gap: 30px;
      column-gap: 30px;
      &.header-quick-buttons {
        margin-right: 0;
        padding: 4px 10px;
        border: 1px solid #F4F4F9;
        border-radius: 4px;
        display: flex;
        gap: 10px;
        .co-icon {
          height: 20px;
          width: 20px;
          &.active {
            svg {
              fill: #1A73E8;
            }
          }
        }
      }
    }
    .co-transaction-header-definitive {
      .co-input-checkbox {
        font-size: 11px;
      }
    }
    .co-transaction-header-delivery-wrapper {
      display: flex;
      flex-direction: column;
      row-gap: 20px;
    }
    .header-delivery-deliverydate {
      .co-input-checkbox {
        font-size: $tp-font-size-small;
        flex-direction: column-reverse;
      }
    }
  }
}