@include export-module('cc-transaction-cash-register-payment-dialog-layout') {
  .co-transaction-cash-register-payment-dialog {
    font-family: $tp-transaction-cash-register-payment-dialog-font-family;
    font-size: $tp-transaction-cash-register-payment-dialog-font-size;

    .co-dialog:not(.is-mobile) .co-dialog-wrapper {
      min-width: $tp-transaction-cash-register-payment-dialog-min-width;
      width: auto;
      min-height: $tp-transaction-cash-register-payment-dialog-min-height;
    }
    .co-payment-qr-code .payment-qr-code-wrapper img {
      max-height: $tp-transaction-cash-register-payment-dialog-qr-code-height;
    }
    .dialog-content-wrapper {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%;
      align-items: center;
      gap: $tp-transaction-cash-register-payment-dialog-gap;
      .image-wrapper {
        height: $tp-transaction-cash-register-payment-dialog-image-height;
        width: 100%;
        .payment-image {
          background-image: url($tp-transaction-cash-register-payment-dialog-image-url);
          height: 100%;
          width: 100%;
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center center;
        }
      }
    }


    .co-transaction-cash-register-payment-voucher{

      .voucher-input {
        border: 2px solid $tp-transaction-cash-register-payment-dialog-button-border-color;

        &.hover {
          border: 2px solid $tp-transaction-cash-register-payment-dialog-button-border-color;
        }
      }
      .payment-input-button{
        .validate-voucher-button {
          border: $tp-transaction-cash-register-payment-dialog-button-border;
          span {
            color: $tp-transaction-cash-register-payment-dialog-button-border-color;
          }
        }

        .voucher-info-icon {
          padding: 5px;
          border-radius: 5px;
          height: 36px;
          width: 36px;
          border: $tp-transaction-cash-register-payment-dialog-button-border;
            fill-opacity: 100%;
            fill: $tp-transaction-cash-register-payment-dialog-button-border-color;

            &.disabled {
              fill-opacity: 50%;
              border: $tp-transaction-cash-register-payment-dialog-button-border-disabled;
            }
        }
      }
    }

    .co-transaction-cash-register-payment-voucher-popup {
      .co-dialog:not(.is-mobile) {
        .co-dialog-wrapper {
          width: 256px;
          height: 232px;
          min-width: 256px;
          min-height: 232px;
        }
      }
    }
    .payment-status-message {
      align-self: flex-start;
    }
    .title-wrapper {
      display: flex;
      gap: 30px;
      font-size: $tp-transaction-cash-register-payment-dialog-font-size;
      .title-date {
        color: $tp-transaction-cash-register-payment-dialog-title-time-color;
      }
    }
    .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: $tp-transaction-cash-register-payment-dialog-row-gap;
      width: $tp-transaction-cash-register-payment-dialog-payment-wrapper-width;
      justify-content: center;
      overflow: hidden;
      > * {
        display: flex;
        justify-content: center;
      }
    }
    .payment-methods-wrapper, .payment-cash-register-wrapper {
      display: flex;
      row-gap: $tp-transaction-cash-register-payment-dialog-row-gap;
      flex: 1;
      flex-direction: column;
    }
    .payment-methods-register-wrapper {
      display: flex;
      flex-direction: column;
      gap: $tp-transaction-cash-register-payment-dialog-row-gap;
    }
    .payment-methods-header {
      display: flex;
      column-gap: 3px;
    }
    .payment-header-title {
      font-family: $tp-transaction-cash-register-payment-dialog-header-font-family;
      font-size: $tp-transaction-cash-register-payment-dialog-header-font-size;
      font-weight: $tp-transaction-cash-register-payment-dialog-header-font-weight;
      &.extra {

      }
    }
    .payment-methods {
      position: relative;
      display: flex;
      flex-direction: row;
      column-gap: $tp-transaction-cash-register-payment-dialog-methods-column-gap;
      row-gap: $tp-transaction-cash-register-payment-dialog-methods-row-gap;
      max-width: 620px;
      .loader {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
    .payment-to-pay-wrapper {
      display: flex;
      width: 100%;
      gap: $tp-transaction-cash-register-payment-dialog-row-gap;
      .payment-to-pay-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: $tp-transaction-cash-register-payment-dialog-row-gap;
      }
    }
    .numpad-wrapper {
      flex-basis: 70%;
    }
    .voucher-to-pay-wrapper {
      width: 100%;
      height: 100%;
      align-items: center;
      flex-direction: column;
      display: flex;
      .row {
        width: 100%;
        display: flex;
        align-items: center;
        .payment-header-title, .payment-total-pay {
          font-size: 16px;
          font-weight: bold;
          display: flex;
          width: 65%;
        }

        .payment-total-pay {
          text-align: end;
          width: 35%;
        }
      }
    }
    .cash-register-payment-dialog-methods-wrapper {
      display: flex;
      padding: 10px 0 0 0;
      gap: 10px;
    }
    .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;
    }
    .payment-to-pay-total {
      display: flex;
      flex-direction: column;
      row-gap: 20px;
      column-gap: 20px;
    }
    .voucher-payment-to-pay-button {
      display: flex;
      height: $tp-transaction-cash-register-payment-dialog-payment-button-size;
      cursor: pointer;

      .co-icon {
        fill: $tp-transaction-cash-register-payment-dialog-button-border-color;
      }

      .co-button {
        color: $tp-transaction-cash-register-payment-dialog-button-icon-color;
        background: $tp-transaction-cash-register-payment-dialog-button-background-color;
        border-radius: $tp-transaction-cash-register-payment-dialog-button-border-radius;
        border-style: $tp-transaction-cash-register-payment-dialog-button-border-style;
        border-width: $tp-transaction-cash-register-payment-dialog-button-border-width;
        border-color: $tp-transaction-cash-register-payment-dialog-button-border-color;


      }
    }

    .payment-to-pay-button {
      width: $tp-transaction-cash-register-payment-dialog-payment-button-size;
      height: $tp-transaction-cash-register-payment-dialog-payment-button-size;
      cursor: pointer;
      .payment-error-message {
        margin: $tp-transaction-cash-register-payment-dialog-error-margin;
        font-family: $tp-transaction-cash-register-payment-dialog-error-font-family;
        font-size: $tp-transaction-cash-register-payment-dialog-error-font-size;
        font-style: $tp-transaction-cash-register-payment-dialog-error-font-style;
      }
      .co-button {
        justify-content: center;
        border-radius: $tp-transaction-cash-register-payment-dialog-button-border-radius;
        background-color: $tp-transaction-cash-register-payment-dialog-button-background-color;
        filter: brightness(1);
        height: $tp-transaction-cash-register-payment-dialog-payment-button-size;
        width: $tp-transaction-cash-register-payment-dialog-payment-button-size;
        border-style: $tp-transaction-cash-register-payment-dialog-button-border-style;
        border-width: $tp-transaction-cash-register-payment-dialog-button-border-width;
        border-color: $tp-transaction-cash-register-payment-dialog-button-border-color;
        .co-icon {
          height: 60%;
          svg {
            fill: $tp-transaction-cash-register-payment-dialog-button-icon-color;
          }
        }
      }
      &.no-deposit {
        grid-row: 2 / 2;
      }
    }
    .payment-description-wrapper {
      display: flex;
      gap: 10px;
    }
    .payment-to-pay-keypad {
      grid-column: 2 / 2;
      grid-row: 1 / 3;
      max-width: $tp-transaction-cash-register-payment-dialog-keypad-max-width;
    }
    .default-buttons {
      display: flex;
      column-gap: 10px;
      .co-button {
        color: $tp-transaction-cash-register-payment-dialog-button-icon-color;
        background: $tp-transaction-cash-register-payment-dialog-button-background-color;
        border-radius: $tp-transaction-cash-register-payment-dialog-button-border-radius;
        border-style: $tp-transaction-cash-register-payment-dialog-button-border-style;
        border-width: $tp-transaction-cash-register-payment-dialog-button-border-width;
        border-color: $tp-transaction-cash-register-payment-dialog-button-border-color;
      }
    }

    .receipt-content-wrapper {
      display: flex;
      column-gap: 15px;
      .receipt-option {
        display: flex;
        align-items: center;
        grid-column-gap: 10px;
        column-gap: 10px;
        border-style: $tp-transaction-cash-register-payment-dialog-button-border-style;
        border-width: $tp-transaction-cash-register-payment-dialog-button-border-width;
        border-color: $tp-transaction-cash-register-payment-dialog-button-border-color;
        color: $tp-transaction-cash-register-payment-dialog-button-icon-color;
        padding: 10px;
        border-radius: $tp-transaction-cash-register-payment-dialog-button-border-radius;
        min-width: $tp-transaction-cash-register-payment-dialog-receipt-button-min-width;
        justify-content: center;
        cursor: pointer;

        &:hover {
          background-color: rgba(26, 115, 232, 0.21);
        }

        &.disabled {
          cursor: default;
          filter: grayscale(1);
        }

        .co-icon {
          width: 20px;
          height: 20px;
          svg { // for fontawesome icons
            fill: $tp-transaction-cash-register-payment-dialog-button-icon-color;
          }
          & [fill] { // for own icons
            fill: $tp-transaction-cash-register-payment-dialog-button-icon-color;
          }
        }
      }
    }
  }
}

.receipt-option-wrapper {
  margin: 15px 0 0 0;
  .receipt-option {
    display: flex;
    align-items: center;
    grid-column-gap: 10px;
    column-gap: 10px;
    border: 1px solid #1a73e8;
    color: #1a73e8;
    padding: 10px;
    border-radius: 8px;
    min-width: 140px;
    justify-content: center;
    cursor: pointer;

    &:hover {
      background-color: rgba(26, 115, 232, 0.21);
    }

    &.disabled {
      cursor: default;
      filter: grayscale(1);
    }

    .co-icon {
      width: 20px;
      height: 20px;

      svg { // for fontawesome icons
        fill: #1a73e8;
      }

      & [fill] { // for own icons
        fill: #1a73e8;
      }
    }
  }
}
