@use '@/assets/styles/shared/label' as sharedLabel;

@mixin text-field-custom-properties() {
  --input-font-family: inherit;
  --input-font-size: 20px; //var(--font-size-1);

  /* UI States */
  --input-color: var(--fitx-input-color, var(--brand-color-gray-carbon));
  --input-color-background: var(--fitx-input-color-background, transparent);
  --input-color-border: var(--fitx-input-color-border, var(--brand-color-gray-stone));

  /* --input-color-hover: red;
  --input-color-background-hover: red; */
  --input-color-hover: var(--fitx-input-color);
  --input-color-border-hover: var(
    --fitx-input-color-border-hover,
    var(--brand-color-gray-graphite)
  );

  --input-color-disabled: var(--fitx-input-color-disabled, var(--brand-color-gray-cement));
  --input-color-background-disabled: var(
    --fitx-input-color-background-disabled,
    var(--brand-color-gray-chalk)
  );
  --input-color-border-disabled: var(
    --fitx-input-color-border-disabled,
    var(--brand-color-gray-stone)
  );

  --input-color-border-focused: var(
    --fitx-input-color-border-focused,
    var(--brand-color-anthracite-0)
  );

  --input-color-border-error: var(--fitx-input-color-border-error, var(--functional-color-error-0));
  --input-color-error: var(--fitx-input-color-error, inherit);
  --label-color-error: var(--fitx-label-color-error, var(--functional-color-error-0));
  --input-color-background-error: var(
    --fitx-input-color-background-error,
    var(--functional-color-error-1-light)
  );

  --_input-color-additional: var(--fitx-input-color-additional, var(--brand-color-gray-carbon));

  --icon-fill: var(--label-color);

  /* Other */
  --input-radius: var(--fitx-radius-4);
  --input-padding-inline: var(--fitx-size-small);
  --input-padding-block: var(--fitx-size-tiny);
  --input-gap: 10px;
  --input-border: 1px solid var(--input-color-border);
  --text-field-gap: var(--fitx-size-tiny);

  /* FitX Custom */
  --input-height: 60px;

  /* Label */
  --label-font-size: var(--input-font-size);
  --label-position-block-start: calc(var(--input-height) / 2);

  --icon-width: 24px;
  --icon-height: 24px;
}

.text-field {
  $self: &;
  @include sharedLabel.label-styles();
}

.text-field {
  $self: &;
  @include text-field-custom-properties();

  position: relative;

  /* &:has(.input--disabled) {
    --label-color: var(--brand-color-gray-graphite);
    --input-color-hover: var(--input-color-disabled);
    --input-color-background-hover: var(--input-color-background-disabled);
    --input-color-border-hover: var(--input-color-border-disabled);
    --input-color-border: var(--input-color-border-disabled);
  } */

  &--has-error {
    --input-color: var(--input-color-error);
    --input-color-border: var(--input-color-border-error);
    --label-color: var(--label-color-error);
    --input-color-background: var(--input-color-background-error);

    --input-color-border-hover: var(--input-color-border-error);
    --label-color-hover: var(--label-color-error);
    --input-color-background-hover: var(--input-color-background-error);
  }

  &:has(.input__start:not(:empty)) label {
    margin-inline-start: calc(var(--icon-width) + var(--input-gap));
  }

  & input {
    padding-inline: 0;
    padding-block: 0;
    border: 0;
  }

  &__input {
    align-content: center;
    align-items: center;
    height: var(--input-height);
    outline: none;
  }

  &__additional {
    font-size: var(--font-size-0);
    color: var(--_input-color-additional);
  }

  .is-filled &,
  &--is-filled,
  &:focus-within {
    --label-font-size: 0.875rem;
    --label-position-block-start: calc(var(--input-padding-inline) + 2px);

    #{$self}__input {
      padding-block-start: calc(var(--input-padding-block) + var(--label-font-size));
    }

    & .input__start,
    & .input__end {
      translate: 0 calc((var(--input-padding-block)) * -1);
    }
  }

  & .input__start,
  & .input__end {
    display: flex;
  }

  &:focus-within,
  &:has(.input--focused) {
    --input-color-border: var(--input-color-border-focused);
  }

  &__label {
    transition:
      font-size 60ms ease,
      top 60ms ease;
    position: absolute;
    top: var(--label-position-block-start);
    translate: var(--input-padding-inline) -50%;
    line-height: var(--label-font-size);
  }
}

.icon-valid {
  --icon-fill: var(--functional-color-success-0);
}