@import url("../index.scss");
@import url("../typography.scss");

.digit-card-inputError {
  @apply block w-full h-10 outline-none bg-white text-text-primary;
  font-style: theme(digitv2.fontStyle.normal);
  padding-left:theme(digitv2.spacers.spacer3);
  font-family: theme(digitv2.fontFamily.sans);
  font-size: theme(digitv2.spacers.spacer4);
  color: theme(digitv2.lightTheme.text-primary);
  line-height: theme(digitv2.spacers.spacer6);
  border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
}

.digit-text-input-field {
  @apply relative w-full;

  &.geolocation {
    input {
      @apply pointer-events-none;
    }
  }

  &.numeric {
    input {
      @apply text-center overflow-hidden whitespace-no-wrap;
      text-overflow: ellipsis;
    }

    .input-container:focus-within {
      input {
        border-left-style: hidden;
        border-right-style: hidden;
      }
    }

    &.numeric-buttons-only{
      input{
        pointer-events: none !important;
        cursor: not-allowed;
      }
    }
  }

  &.prefix {
    .input-container:focus-within {
      input {
        border-left-style: hidden;
      }
    }
  }

  &.suffix {
    .input-container:focus-within {
      input {
        border-right-style: hidden;
      }
    }
  }

  &.password {
    input {
      font-family: theme(digitv2.fontFamily.sans);
      font-size: theme(digitv2.spacers.spacer4);
      font-weight: 900;
      line-height: theme(digitv2.spacers.spacer6);
    }
  }

  &.disabled {

    input,
    .digit-prefix,
    .digit-suffix,
    .digit-numeric-button-prefix,
    .digit-numeric-button-suffix {
      pointer-events: none !important;
      cursor: not-allowed;
      background-color: theme(digitv2.lightTheme.generic-background);
      border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
      color: theme(digitv2.lightTheme.generic-divider);
    }

    input {
      background-color: white;
    }

    .digit-numeric-button-prefix,
    .digit-prefix {
      border-right-style: hidden;
    }

    .digit-numeric-button-suffix,
    .digit-suffix {
      border-left-style: hidden;
    }
  }

  input[type="time"]::-webkit-calendar-picker-indicator,
  input[type="date"]::-webkit-calendar-picker-indicator,
  input[type="date"]:disabled::-webkit-calendar-picker-indicator,
  input[type="time"]:disabled::-webkit-calendar-picker-indicator {
    @apply absolute cursor-pointer w-6 h-6;
    right: theme(digitv2.spacers.spacer3);
    top: 50%;
    transform: translateY(-50%);
  }

  input[type="date"]:disabled::-webkit-calendar-picker-indicator,
  input[type="time"]:disabled::-webkit-calendar-picker-indicator {
    visibility: visible;
    filter: invert(85%) sepia(0%) saturate(337%) hue-rotate(50deg) brightness(99%) contrast(99%);
  }

  input[type="date"][value=""]::-webkit-datetime-edit,
  input[type="time"][value=""]::-webkit-datetime-edit,
  input[type="date"]:disabled::-webkit-datetime-edit,
  input[type="time"]:disabled::-webkit-datetime-edit,
  input[type="search"]::-webkit-search-cancel-button,
  input[type="search"]::-webkit-search-clear-button {
    display: none;
  }

  ::placeholder,
  input[type="date"][value=""]:not(:placeholder-shown)::before,
  input[type="time"][value=""]:not(:placeholder-shown)::before {
    content: attr(placeholder);
    color: theme(digitv2.lightTheme.text-disabled);
    font-family: theme(digitv2.fontFamily.sans);
    font-weight: theme(digitv2.fontWeight.regular);
    font-size: theme(digitv2.spacers.spacer4);
    line-height: theme(digitv2.spacers.spacer6);
  }

  &.noneditable {

    .digit-prefix,
    .digit-suffix,
    .digit-numeric-button-prefix,
    .digit-numeric-button-suffix {
      pointer-events: none !important;
      border: 0.063rem solid theme(digitv2.lightTheme.generic-inputborder);
      background: theme(digitv2.lightTheme.generic-background);
      color: theme(digitv2.lightTheme.text-secondary);
    }

    input {
      border: 0.063rem solid theme(digitv2.lightTheme.generic-inputborder);
      background: theme(digitv2.lightTheme.generic-background);
      color: theme(digitv2.lightTheme.text-secondary);
    }

    .digit-numeric-button-prefix,
    .digit-prefix {
      border-right-style: hidden;
    }

    .digit-numeric-button-suffix,
    .digit-suffix {
      border-left-style: hidden;
    }

    input[type="date"]::-webkit-calendar-picker-indicator,
    input[type="time"]::-webkit-calendar-picker-indicator {
      visibility: visible;
      filter: invert(74%) sepia(7%) saturate(64%) hue-rotate(144deg) brightness(98%) contrast(89%);
    }
  }

  &.error {

    input,
    .digit-prefix,
    .digit-suffix,
    .digit-numeric-button-prefix,
    .digit-numeric-button-suffix {
      border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
    }

    .digit-numeric-button-prefix,
    .digit-prefix {
      border-right: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
    }

    .digit-numeric-button-suffix,
    .digit-suffix {
      border-left: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
    }

    &.numeric {
      input {
        border-left-style: hidden;
        border-right-style: hidden;
      }
    }

    &.suffix {
      input {
        border-right-style: hidden;
      }
    }

    &.prefix {
      input {
        border-left-style: hidden;
      }
    }
  }
}


.digit-card-input-field {
  @apply outline-none mt-sm block w-full h-10 bg-white text-form-field;
  padding-left: theme(digitv2.spacers.spacer3);
  border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
  color: theme(digitv2.lightTheme.text-primary);
  line-height: theme(digitv2.spacers.spacer6);
}

.digit-card-inputError {
  @apply block w-full h-10 outline-none bg-white text-form-field text-text-primary;
  font-style: theme(digitv2.fontStyle.normal);
  padding-left: theme(digitv2.spacers.spacer3);
  font-family: theme(digitv2.fontFamily.sans);
  font-size: theme(digitv2.spacers.spacer4);
  color: theme(digitv2.lightTheme.text-primary);
  line-height: theme(digitv2.spacers.spacer6);
  border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
}

.digit-employeeCard-input {
  @extend .typography.text-body-s;
  @apply outline-none block w-full h-10 bg-white text-form-field;
  font-style: theme(digitv2.fontStyle.normal);
  padding-left: theme(digitv2.spacers.spacer3);
  font-family: theme(digitv2.fontFamily.sans);
  font-size: theme(digitv2.spacers.spacer4);
  border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
  color: theme(digitv2.lightTheme.text-primary);
  line-height: theme(digitv2.spacers.spacer6);
}

.digit-employeeCard-input:disabled {
  @apply border-grey-dark text-grey-dark !important;
  pointer-events: none !important;
}

.digit-employeeCard-input--front {
  @extend .typography.text-body-s;
  @apply flex items-center;
  width: fit-content !important;
  background: theme(colors.grey.mid);
  border-right: 0;
  padding-right: 0.313rem;
}

.digit-employeeCard-inputError {
  @extend .typography.text-body-s;
  @apply block w-full h-10 outline-none bg-white text-form-field text-text-primary;
  font-style: theme(digitv2.fontStyle.normal);
  padding-left: theme(digitv2.spacers.spacer3);
  font-family: theme(digitv2.fontFamily.sans);
  font-size: theme(digitv2.spacers.spacer4);
  color: theme(digitv2.lightTheme.text-primary);
  line-height: theme(digitv2.spacers.spacer6);
  border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
}

.digit-inputWrapper {
  @apply flex justify-start;
  max-width: 31.25rem;

  div {
    max-width: 5rem;
  }

  span {
    margin-top: theme(digitv2.spacers.spacer4);
    margin-left: 10%;
    margin-right: 10%;
  }
}

@screen dt {
  .digit-card-input-field {
    width: 30rem;
  }

  .digit-card-input-field-emp {
    width: 15rem;
  }

  .digit-card-inputError {
    width: 30rem;
  }

  .digit-employeeCard-input {
    @apply w-full;
  }

  .digit-employeeCard-inputError {
    @apply w-full;
  }

  .digit-card-textarea-field {
    @apply w-full;
    max-width: 33.75rem;
  }

  .card-input-emp {
    width: 15rem;
  }
}

.digit-citizenCard-input {
  @extend .typography.text-body-s;
  @apply outline-none block w-full h-10 bg-white;
  font-style: theme(digitv2.fontStyle.normal);
  padding-left: theme(digitv2.spacers.spacer3);
  font-family: theme(digitv2.fontFamily.sans);
  font-size: theme(digitv2.spacers.spacer4);
  border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
  color: theme(digitv2.lightTheme.text-primary);
  line-height: theme(digitv2.spacers.spacer6);
}

.digit-citizenCard-input--front {
  @extend .typography.text-body-s;
  @apply flex items-center;
  width: fit-content !important;
  background: theme(colors.grey.mid);
  border-right: 0;
  padding-right: 0.313rem;
}

.digit-employeeCard-inputError {
  @extend .typography.text-body-s;
  @extend .light-input-border;
  @apply block w-full h-10 outline-none bg-white text-form-field text-text-primary;
  font-style: theme(digitv2.fontStyle.normal);
  padding-left: theme(digitv2.spacers.spacer3);
  font-family: theme(digitv2.fontFamily.sans);
  font-size: theme(digitv2.spacers.spacer4);
  color: theme(digitv2.lightTheme.text-primary);
  line-height:theme(digitv2.spacers.spacer6);
  border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
}

.digit-card-inputError {
  @extend .light-input-border;
  @apply block w-full h-10 outline-none bg-white text-form-field text-text-primary;
  font-family: theme(digitv2.fontFamily.sans);
  padding-left: theme(digitv2.spacers.spacer3);
  font-family: theme(digitv2.fontFamily.sans);
  font-size: theme(digitv2.spacers.spacer4);
  color: theme(digitv2.lightTheme.text-primary);
  line-height: theme(digitv2.spacers.spacer6);
  border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
}


.input-container {
  @apply relative flex items-center h-10;
  max-width: 37.5rem;

  &.date,
  &.time,
  &.geolocation,
  &.password,
  &.search,
  &.passwordToText,
  &.withIcon {
    input {
      padding-right: theme(digitv2.spacers.spacer10);
    }
  }

  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4)  {
    /* Media query for tablets */
    max-width: 27.5rem;
  }

  @media (max-aspect-ratio: 9/16) {
    /* Media query for mobile */
    max-width: 100%;
    width: 100%;
  }

  @media (min-aspect-ratio: 3/4) {
    /* Media query for desktop */
    max-width: 37.5rem;
  }

}

.input-container:focus-within {

  .digit-numeric-button-prefix:not([readonly]),
  .digit-numeric-button-suffix:not([readonly]),
  .digit-prefix:not([readonly]),
  .digit-suffix:not([readonly]),
  input:not([readonly]) {
    outline: none;
    border: 0.094rem solid theme(digitv2.lightTheme.primary-1);
  }

  .digit-numeric-button-prefix,
  .digit-prefix {
    border-right: 0.063rem solid theme(digitv2.lightTheme.text-secondary) !important;
  }

  .digit-numeric-button-suffix,
  .digit-suffix {
    border-left: 0.063rem solid theme(digitv2.lightTheme.text-secondary) !important;
  }
}

.digit-prefix,
.digit-suffix,
.digit-numeric-button-prefix,
.digit-numeric-button-suffix {
  @apply font-bold text-center;
  font-family: theme(digitv2.fontFamily.sans);
  font-style: theme(digitv2.fontStyle.normal);
  color: theme(digitv2.lightTheme.text-secondary);
  font-size: theme(digitv2.spacers.spacer5);
  height: theme(digitv2.spacers.spacer10) !important;
  border: 0.063rem solid theme(digitv2.lightTheme.text-secondary);
  line-height: 1.172rem;
  background: theme(colors.grey.mid);
  max-width: none !important;
  flex: 0 0 2.5rem;
}

.digit-numeric-button-prefix,
.digit-numeric-button-suffix {
  width: theme(digitv2.spacers.spacer10) !important;
  font-size: theme(digitv2.spacers.spacer6);
}

.digit-prefix,
.digit-numeric-button-prefix {
  border-right-style: hidden;
}

.digit-suffix,
.digit-numeric-button-suffix {
  border-left-style: hidden;
}

.digit-prefix,
.digit-suffix {
  @apply pointer-events-none;
}

.digit-text-input-customIcon {
  @apply absolute w-6 h-6 cursor-pointer;
  top: theme(digitv2.spacers.spacer2);
  right: theme(digitv2.spacers.spacer3);

  &.nonEditable,
  &.disabled {
    @apply pointer-events-none;
  }
}