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

@include export-module('co-payment-layout') {
  .co-payment {
    font-family: $tp-payment-font-family;
    font-size: $tp-payment-font-size;
    .co-tile {
      &.selected {
        transform: none;
      }
    }
    .co-tile-wrapper {
      min-width: 100%;
      min-height: 50px;
      width: 100%;
      height: 50px;
    }
    .co-tile-select-wrapper {
      display: none;
    }
    .payment-wrapper {
      display: flex;
      flex-direction: column;
      row-gap: 30px;
    }
    .payment-methods-wrapper, .payment-cash-register-wrapper {
      display: flex;
      row-gap: $tp-payment-row-gap;
      flex: 1;
      flex-direction: column;
    }
    .payment-methods-register-wrapper {
      display: flex;
      flex-direction: column;
      gap: $tp-payment-row-gap;
    }
    .payment-methods-header {
      display: flex;
      column-gap: 3px;
    }
    .payment-header-title {
      font-family: $tp-payment-header-font-family;
      font-size: $tp-payment-header-font-size;
      font-weight: $tp-payment-header-font-weight;
      &.extra {

      }
    }
    .payment-methods {
      position: relative;
      display: flex;
      flex-direction: row;
      column-gap: $tp-payment-methods-column-gap;
      row-gap: $tp-payment-methods-row-gap;
      max-width: 620px;
      .loader {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
    .payment-to-pay-wrapper {
      display: grid;
      grid-template-columns: auto auto;
      grid-template-rows: auto auto auto;
      row-gap: 20px;
      column-gap: 20px;
    }
    .payment-deposit {
      grid-column: 1 / 1;
      grid-row: 2 / 2;
      &.no-display {
        display: none;
      }
    }
    .payment-to-pay-header {
      display: flex;
      align-items: center;
      gap: 10px;
      white-space: nowrap;
      .payment-header-title, .payment-total-pay {
        font-size: 26px;
        font-weight: bold;
      }
    }
    .co-payment-to-pay {
      width: 100%;
    }
    .payment-input-button {
      display: flex;
      align-items: center;
      row-gap: 10px;
      column-gap: 10px;
      margin-bottom: 10px;
    }
    .payment-method-message {
      margin-bottom: 15px;
      font-weight: bold;
      color: $tp-payment-error-font-color;
    }
    .payment-to-pay-total {
      display: flex;
      flex-direction: column;
      row-gap: 20px;
      column-gap: 20px;
    }
    .payment-to-pay-button {
      width: 55px;
      height: 55px;
      cursor: pointer;
      .payment-error-message {
        margin: $tp-payment-error-margin;
        font-family: $tp-payment-error-font-family;
        font-size: $tp-payment-error-font-size;
        font-style: $tp-payment-error-font-style;
      }
      .co-button {
        justify-content: center;
        border-radius: 5px;
        background-color: #f1fcff;
        filter: brightness(1);
        height: 55px;
        width: 55px;
        border: 2px solid #0084de;
        .co-icon {
          height: 60%;
          svg {
            fill: #0084de;
          }
        }
      }
      &.no-deposit {
        grid-row: 2 / 2;
      }
    }
    .payment-to-pay-keypad {
      grid-column: 2 / 2;
      grid-row: 1 / 3;
      max-width: $tp-payment-keypad-max-width;
    }

    .action-button-wrapper {
      display: flex;
      flex-direction: row;
      align-content: center;
      justify-content: start;
      gap: 0.25em;
      margin: 1em 0;

      .action-button {
        display: flex;
        width: 150px;
        background: $tp-payment-color-action;
        color: white;
        padding: 0.25em 0.5em;
        border-radius: 0.25em;
      }
    }
  }
}