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

@include export-module('cc-transaction-header-payment-layout') {
  .co-transaction-header-payment {
    display: flex;
    overflow: hidden;
    .payment-payed-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #8083A3;
      width: 115px;
      height: 30px;
      border-radius: 4px;
      position: relative;
    }
    .transaction-header-payment-wrapper {
      width: 100%;
    }
    .header-remaining-payment-amount-wrapper {
      position: relative;
      display: flex;
      height: 30px;
      align-items: center;
      border-radius: 4px;
      border: 1px solid #8083A3;
      width: 115px;
      justify-content: center;
      .co-transaction-header-remaining-amount {
        span {
          font-weight: 600;
          font-size: 11px;
        }
      }
    }
    .transaction-header-payment-wrapper-content {
      display: flex;
      flex-direction: column;
      height: 100%;
      transform: translateY(0);
      transition: transform .2s ease-in-out;
      &.show-remaining {
        transform: translateY(-$tp-co-transaction-header-expanded-height);
      }
      .co-transaction-header-block {
        min-height: $tp-co-transaction-header-expanded-height;
      }
    }
    .transaction-header-payment-dialog {
      .co-transaction-header-block {
        padding: 4px 0;
      }
      .co-transaction-header-payment-button {
        flex-basis: 50%;
      }
      .transaction-header-block-content {
        .transaction-header-block-content-first, .transaction-header-block-content-second {
          flex-basis: 50%;
        }
      }
    }
    .transaction-header-block-content {
      cursor: pointer;
      justify-content: flex-start;
      padding-left: 0;
    }
    .transaction-header-deposit  {
      .co-input-text {
        height: auto;
        padding: 0;
        input {
          padding: 0;
          margin: 0;
        }
      }
    }
    .transaction-header-payment-dialog:not(.is-mobile) {
      .co-dialog-wrapper {
        min-width: 500px;
      }
    }
    .header-downpayment-percentage-wrapper {
      border-style: solid;
      border-width: $tp-co-transaction-header-downpayment-border-width;
      border-radius: $tp-co-transaction-header-downpayment-border-radius;
      padding: $tp-co-transaction-header-downpayment-percentage-padding;
      height: 100%;
      background-color: $tp-co-transaction-header-downpayment-percentage-wrapper-background;
      border-color: $tp-co-transaction-header-downpayment-border-color;
      pointer-events: none;
      .transaction-header-deposit {
        span {
          font-weight: $tp-co-transaction-header-downpayment-amount-weight;
        }
      }
    }
    .transaction-header-icon {
      &.remaining-icon {
        width: 30px;
        height: 30px;
        cursor: pointer;
        .remaining-icon-order {
          display: flex;
          grid-column-gap: 8px;
          column-gap: 8px;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          border-style: solid;
          border-width: 0px;
          border-radius: 5px;
          padding: 0px 10px;
          background: #fff;
          height: 100%;
          box-shadow: 0px 0px 7px 2px rgba(160, 160, 160, 0.3);
          width: 100%;
          .co-icon {
            width: 20px;
            height: 20px;
          }
        }
      }
    }
    .header-downpayment-amount-wrapper {
      position: relative;
      height: 30px;
      width: 115px;
      border: 1px solid #8083A3;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      .transaction-header-deposit, .transaction-header-remaining {
        span {
          font-weight: $tp-co-transaction-header-downpayment-amount-weight;
          font-size: 11px;
        }
      }
      co-transaction-header-deposit-amount {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        co-input-text {
          width: 100%;
          height: 100% !important;
          background: none !important;
          &:before {
            display: none;
          }
          .input-text-wrapper {
            width: 100%;
            .input-wrapper {
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              input {
                padding: 5px;
                text-align: center;
                width: 100%;
              }
            }
          }
        }
      }
    }
    .header-payment-button-wrapper {
      display: flex;
      align-items: center;
      gap: $tp-co-transaction-header-payment-button-wrapper-gap;
      justify-content: center;
      border-style: solid;
      border-width: $tp-co-transaction-header-payment-button-wrapper-border-width;
      border-radius: $tp-co-transaction-header-payment-button-wrapper-border-radius;
      padding: $tp-co-transaction-header-payment-button-wrapper-padding;
      border-color: $tp-co-transaction-header-payment-button-wrapper-border-color;
      background: $tp-co-transaction-header-payment-button-wrapper-background;
      cursor: pointer;
      width: $tp-co-transaction-header-payment-button-wrapper-height;
      background: #fff;
      height: $tp-co-transaction-header-payment-button-wrapper-height;
      box-shadow: 0px 0px 7px 2px rgba(160,160,160,0.3);
      .header-order-icon {
        width: $tp-co-transaction-header-payment-button-wrapper-icon-size;
        height: $tp-co-transaction-header-payment-button-wrapper-icon-size;
      }
      .payment-paid {
        &.success {
          color: $tp-color-payed-value;
          font-weight: 600;
        }
      }
      .spacer {
        width: 1px;
        height: 100%;
        background: $tp-co-transaction-header-payment-button-wrapper-border-color;
      }
    }
    .payment-dialog {
      .co-dialog-wrapper-popup-title {
        display: flex;
        align-items: center;
        grid-column-gap: 10px;
        column-gap: 10px;
        margin-bottom: 20px;
        .co-icon {
          height: 20px;
          width: 20px;
          margin: 0;
        }
        .co-dialog-header-title {
          margin: 0;
        }
      }
    }
  }
}