@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@100;200;300;400;500;600;800;900&display=swap');

@import "./variables";

.co-transaction-hidden {
  display: none !important; // todo find other way to hide components, eg remove from dom
}

.hidden {
  display: none !important; // todo find other way to hide components, eg remove from dom
}

.transaction-not-definitive {
  opacity: $tp-transaction-not-definitive-opacity;
  * {
    user-select: none;
    pointer-events: none !important;
  }
}
.co-transaction {
  .co-send-method-dialog {
    .co-dialog {
      &:not(.is-mobile) {
        .co-dialog-wrapper {
          width: 500px;
          background-color: #ffffff;
          .dialog-header {
            background-color: #ffffff;
          }
          .dialog-content {
            background-color: #ffffff;
          }
          .dialog-footer {
            background-color: #ffffff;
          }
        }
        .co-preview-pdf-dialog .co-dialog-wrapper {
          width: 90%;
        }
      }
      .co-input-checkbox {
        &:not(.hasnolabel) {
          .checkbox {
            border-color: #f8f8fa;
            background-color: #f8f8fa;
          }
        }
      }
    }
  }
  .co-dialog {
    &:not(.borderless) {
      .co-dialog-wrapper {
        background-color: $tp-transaction-dialog-background;
        .dialog-header {
          background-color: $tp-transaction-dialog-background;
        }
        .dialog-content {
          background-color: $tp-transaction-dialog-background;
        }
        .dialog-footer {
          background-color: $tp-transaction-dialog-background;
        }
      }
    }
    &:not(.is-mobile) {
      .co-dialog-wrapper {
        width: $tp-transaction-dialog-default-width;
      }
    }
    .dialog-footer {
      background-color: $tp-transaction-dialog-footer-background;
      border-width: $tp-transaction-dialog-footer-border-width;
      border-style: solid;
      border-color: $tp-transaction-dialog-footer-border-color;
      padding: $tp-transaction-dialog-footer-padding;
      .co-dialog-footer-button-wrapper {
        gap: $tp-transaction-dialog-footer-button-wrapper-gap;
      }
    }
    .co-dialog-wrapper-popup-title {
      display: flex;
      align-items: center;
      grid-column-gap: $tp-transaction-dialog-title-gap;
      column-gap: $tp-transaction-dialog-title-gap;
      .co-dialog-header-title {
        font-size: $tp-transaction-dialog-title-font-size;
        margin: $tp-transaction-dialog-title-text-margin;
        font-weight: bold;
      }
      .co-icon {
        height: $tp-transaction-dialog-title-icon-size;
        width: $tp-transaction-dialog-title-icon-size;
        margin: $tp-transaction-dialog-title-icon-margin;
      }
    }
    .save-button {
      height: $tp-transaction-dialog-save-button-size;
      width: $tp-transaction-dialog-save-button-size;
      border-color: $tp-transaction-dialog-button-border-color;
      border-style: $tp-transaction-dialog-button-border-style;
      border-width: $tp-transaction-dialog-button-border-width;
      background-color: $tp-transaction-dialog-button-background-color;
      padding: $tp-transaction-dialog-button-padding;
      box-shadow: $tp-transaction-dialog-button-box-shadow;
      cursor: pointer;
      .co-icon {
        height: $tp-transaction-dialog-save-button-icon-size;
        width: $tp-transaction-dialog-save-button-icon-size;
        svg {
          fill: $tp-transaction-dialog-save-button-icon-color;
        }
      }
    }
    .close-button {
      height: $tp-transaction-dialog-close-button-size;
      width: $tp-transaction-dialog-close-button-size;
      border-color: $tp-transaction-dialog-button-border-color;
      border-style: $tp-transaction-dialog-button-border-style;
      border-width: $tp-transaction-dialog-button-border-width;
      background-color: $tp-transaction-dialog-close-button-background-color;
      padding: $tp-transaction-dialog-button-padding;
      box-shadow: $tp-transaction-dialog-button-box-shadow;
      cursor: pointer;
      .co-icon {
        height: $tp-transaction-dialog-save-button-icon-size;
        width: $tp-transaction-dialog-save-button-icon-size;
        svg {
          fill: $tp-transaction-dialog-save-button-icon-color;
        }
        [fill] {
          fill: $tp-transaction-dialog-save-button-icon-color;
        }
      }
    }
    .co-input-checkbox {
      &:not(.hasnolabel) {
        .checkbox {
          border-color: $tp-transaction-dialog-color-light;
          background-color: $tp-transaction-dialog-color-light;
          &.checked {
            border-color: $tp-transaction-dialog-checkbox-checked-background-color;
            background-color: $tp-transaction-dialog-checkbox-checked-background-color;
          }
          .checkmark {
            &.show {
              border-color: $tp-transaction-dialog-color-light;
            }
          }
        }
      }
    }
    .co-input-text {
      &:before {
        box-shadow: none;
      }
    }
    .co-input-search {
      .co-input-text {
        background: $tp-transaction-dialog-color-light;
      }
    }
  }
}

.co-transaction-default-popup-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: 10px;
  padding: 8px 10px;
  overflow: hidden;
  margin: 0 0 5px 0;
  user-select: none;
  border-radius: $tp-default-border-radius;
  background-color: $tp-default-background-accent;
  .checkbox-list-label-wrapper {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    column-gap: 10px;
  }
}

.co-transaction-check::after {
  display: flex;
  align-items: center;
  justify-content: center;
  content: "\2713";
  width: 30px;
  height: 30px;
  background: transparent;
  color: $tp-color-active-light;
  position: absolute;
  top: -5px;
  right: -15px;
  font-size: 23px;
}

.co-transaction-default-flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: $tp-default-column-gap;
  overflow: auto;
}

.co-transaction-flex-right-align {
  display: flex;
  justify-content: flex-end;
}

.co-transaction-label {
  font-size: 7.5px;
  color: $tp-color-label;
  position: absolute;
  top: -9px;
  background: #FFF;
  padding: 0 5px;
  line-height: 18px;
  text-transform: uppercase;
}

.co-transaction-overflow-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.read-only {
  cursor: default;
}

.actual-read-only{
    cursor: default;
    pointer-events: none !important;
}

.transaction-negative-value {
  color: $tp-color-negative-value;
}

.transaction-red-label {
  color: $tp-color-error;
}

.payment-to-pay-keypad {
  .key-pad-wrapper {
    background: transparent;
    border-color: $tp-payment-amount-border-color;
  }
  .key-pad-button {
    background-color: $tp-payment-amount-background-color;
    color: $tp-payment-amount-color;
    box-shadow: none;
    font-weight: bold;
    .co-icon {
      svg { // for fontawesome icons
        fill: $tp-payment-amount-color;
      }
      & [fill] { // for own icons
        fill: $tp-payment-amount-color;
      }
    }
  }
}
:root {
  --stepper-color: blue;
}