@use "../../foundations/helpers/forward.helpers.scss" as *;
@use "../../assets/form-field/form-field.scss";
@use "../../components/button/button.scss";

$ds-text-input-toggle-btn__width: 28px;
$ds-text-input-toggle-btn__top: 20px;
$ds-text-input-toggle-btn__area: ($ds-text-input-toggle-btn__width + ds-spacing($ds-s-050));

.ds-form-field__error {
  .ds-text-input__input {
    border-color: $ds-color-text-critical;
  }
}

.ds-text-input {
  padding-top: ds-spacing($ds-s-050, rem);
  position: relative;
  color: $ds-color-text-primary;
}

.ds-text-input__input {
  box-sizing: border-box;
  width: 100%;
  background-color: $ds-color-surface-primary;
  padding: ds-px-to-rem(ds-spacing($ds-s-100) - ds-border-width(xxs)) ds-spacing($ds-s-100) - ds-border-width(xxs);
  border: solid ds-border-width(xxs) $ds-color-border-primary-strong;
  border-radius: ds-border-radius(012);
  margin: 0;
  @include ds-typography($ds-typography-functional-body-md) {
    color: $ds-color-text-primary;
  }

  &.password-toggle {
    padding-right: ds-px-to-rem($ds-text-input-toggle-btn__area);
    &:focus {
      padding-right: ds-px-to-rem($ds-text-input-toggle-btn__area - ds-border-width(xs));
    }
  }

  &:focus,
  &:not(:placeholder-shown) {
    + .ds-text-input__label {
      top: 0;
      @include ds-typography($ds-typography-functional-body-md);

      &::before {
        background-color: $ds-color-surface-primary;
      }
    }
  }

  &:focus {
    padding: ds-px-to-rem(ds-spacing($ds-s-100) - ds-border-width(xs)) ds-spacing($ds-s-100) - ds-border-width(xs);
    border-color: $ds-color-border-primary-strongest;
    border-width: ds-border-width(xs);

    + .ds-text-input__label::before {
      height: ds-border-width(xs);
    }
  }

  &:disabled {
    cursor: not-allowed;

    + .ds-text-input__label {
      color: $ds-color-text-primary-disabled;
      cursor: not-allowed;
    }
  }

  &:focus-visible {
    outline: none;
  }
}

.ds-text-input__label {
  position: absolute;
  top: ds-spacing($ds-s-150, rem);
  left: ds-spacing($ds-s-100);
  z-index: 1;
  transition:
    font-size 0.1s ease-in,
    top 0.1s ease-in;
  @include ds-typography($ds-typography-functional-body-md);
  &::before {
    content: "";
    width: calc(100% + ds-spacing($ds-s-050));
    left: -#{ds-spacing($ds-s-025)};
    height: ds-border-width(xxs);
    position: absolute;
    top: ds-spacing($ds-s-050, rem);
    z-index: -1;
    background-color: transparent; // for animation
    transition: background-color 0.2s ease-in-out;
  }
}

.ds-btn.ds-text-input__password-toggle {
  position: absolute;
  top: ds-px-to-rem($ds-text-input-toggle-btn__top);
  right: ds-spacing($ds-s-025);
  z-index: 1;
  min-width: 0;
  min-height: 0;
}

.ds-force-px {
  &.ds-text-input {
    padding-top: ds-spacing($ds-s-050);
    font-size: 16px;
  }

  .ds-text-input__input {
    padding: ds-spacing($ds-s-100) - ds-border-width(xxs);
    @include ds-typography($ds-typography-functional-body-md, true);

    &.password-toggle {
      padding-right: $ds-text-input-toggle-btn__area;
      &:focus {
        padding-right: ($ds-text-input-toggle-btn__area - ds-border-width(xs));
      }
    }

    &:focus,
    &:not(:placeholder-shown) {
      + .ds-text-input__label {
        @include ds-typography($ds-typography-functional-body-md, true);
      }
    }

    &:focus {
      padding: ds-spacing($ds-s-100) - ds-border-width(xs);
    }
  }

  .ds-text-input__label {
    top: ds-spacing($ds-s-150);
    @include ds-typography($ds-typography-functional-body-md, true);
    &::before {
      top: ds-spacing($ds-s-050);
    }
  }

  .ds-text-input__password-toggle {
    top: $ds-text-input-toggle-btn__top;
  }
}