@import "../../helpers";

.sf-input {
  position: relative;
  box-sizing: border-box;
  width: var(--input-width);
  height: var(--input-height);
  min-height: var(
    --input-height,
    calc(
      var(--spacer-base) + var(--spacer-2xs) +
        var(--input-label-font-size, var(--font-size--lg))
    )
  );
  &__label {
    position: absolute;
    display: var(--input-label-display);
    top: var(--input-label-top, 50%);
    left: var(--input-label-left);
    padding: var(--input-label-padding);
    color: var(--input-label-color, var(--c-link));
    text-transform: underline;
    background: var(--input-label-background);
    transform: var(
      --input-label-transform,
      translate3d(0, calc(var(--input-label-top, 50%) * -1), 0)
    );
    transition: var(
      --input-label-transition,
      top 150ms linear,
      font-size 150ms linear
    );

    &::after {
      content: var(--input-label-required);
      color: var(--input-label-color, var(--c-link));
    }
    @include font(
      --input-label-font,
      var(--font-weight--normal),
      var(--font-size--base),
      1,
      var(--font-family--primary)
    );
  }

  &__error-message {
    color: var(--input-error-message-color, var(--c-danger));
    min-height: calc(var(--font-size--xs) * 1.2);
    position: absolute;
    bottom: var(--form-field-error-bottom);
    right: var(--form-field-error-right);
    @include font(
      --input-error-message-font,
      var(--font-weight--medium),
      var(--font-size--xs),
      1.2,
      var(--font-family--secondary)
    );
  }
  &__wrapper,
  input {
    border-radius: 0;
    width: 100%;
    height: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  &__wrapper {
    position: relative;
    margin: 0;
  }
  input {
    display: block;
    box-sizing: border-box;
    padding: var(--input-padding);
    border: none;
    background: var(--input-background);
    color: var(--input-color, var(--c-text));
    @include font(
      --input-font,
      var(--font-weight--normal),
      var(--font-size--base),
      1,
      var(--font-family--primary)
    );
    text-align: var(--input-text-align);
    &:focus,
    &:placeholder-shown,
    &:-webkit-autofill,
    &:-webkit-autofill:hover,
    &:-webkit-autofill:focus {
      & ~ * {
        --icon-color: var(--c-dark);
        --input-password-icon-background: var(--c-primary);
        --input-background-color: var(--c-primary);
        --input-label-top: 1rem;
        --input-label-font-size: var(--font-size--xs);
        --input-error-message-color: var(--c-primary);
      }
    }
    &:required {
      & ~ * {
        --input-label-required: " *";
      }
    }
    &:disabled {
      --input-border-color: var(--c-text-disabled);
      --input-color: var(--c-text-disabled);
      /* add to provide color on iOS */
      -webkit-text-fill-color: var(--c-text-disabled);
      & ~ * {
        --icon-color: var(--text-disabled);
        --input-label-color: var(--c-text-disabled);
      }
    }
    &[type="number"] {
      &::-webkit-inner-spin-button,
      &::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
      -moz-appearance: textfield;
    }
    &[type="search"] {
      -webkit-appearance: none;
    }
  }
  &__password-button {
    --icon-size: 12px;
    --button-padding: 0;
    --button-background: transparent;
    position: absolute;
    top: var(--input-icon-top, 50%);
    right: var(--input-icon-right, var(--spacer-xs));
    transform: translate3d(0, -50%, 0);
    &:hover {
      --button-background: transparent;
      --button-box-shadow: none;
    }
  }
  &__password-icon {
    position: relative;
    &.hidden {
      --input-password-icon-scaleX: 1;
    }
    &::after {
      position: absolute;
      top: 50%;
      width: 100%;
      height: 1px;
      background: var(--input-password-icon-background, var(--c-black));
      transform: translate3d(0, -50%, 0) rotate(45deg)
        scaleX(var(--input-password-icon-scaleX, 0));
      transition: transform 150ms linear;
      content: "";
    }
  }
  &.invalid {
    --input-label-color: var(--c-text);
    input {
      &:focus {
        & ~ * {
          --input-bar-background: var(--c-danger);
          --input-label-color: var(--c-text);
        }
      }
    }
  }
  &.has-text,
  input[type="date"] ~ *,
  input[type="time"] ~ *,
  input[type="image"] ~ *,
  input[type="file"] ~ * {
    --input-label-top: 0;
    --input-label-font-size: var(--font-size--xs);
  }
  &--filled {
    --input-background: var(--c-light);
    --input-font-size: var(--font-size--xs);
    --input-padding: var(--spacer-xs);
    --input-label-left: var(--spacer-xs);
    --input-label-font-size: var(--font-size--xs);
    --input-label-color: var(--c-dark);
    --input-label-transition: color 150ms ease;
    --input-border: none;
    &.has-text {
      --input-label-display: none;
    }
    input {
      &:focus {
        & ~ * {
          --input-bar-width: unset;
          --input-label-top: 50%;
          --input-label-font-size: var(--font-size--xs);
          --input-label-color: var(--c-text);
        }
      }
    }
  }
  &--outline {
    --input-label-left: var(--spacer-sm);
    --input-padding: var(--spacer-xs) var(--spacer-xs) var(--spacer-xs)
      var(--spacer-sm);
    --input-border-color: var(--c-secondary-variant);
    --input-label-background: var(--c-white);
    --input-label-font-size: var(--font-size-base);
    &.sf-input--has-text {
      --input-label-top: -25%;
      --input-label-left: var(--spacer-xs);
      --input-label-padding: 0 var(--spacer-2xs);
    }
    &.sf-input--invalid {
      --input-border-color: var(--c-danger);
      --input-label-color: var(--c-danger);
      input {
        &:focus {
          & ~ * {
            --input-label-color: var(--c-danger);
          }
        }
      }
    }
    input {
      --input-border-width: 1px;
      &:focus {
        & ~ * {
          --input-label-top: -25%;
          --input-label-left: var(--spacer-xs);
          --input-label-padding: 0 var(--spacer-2xs);
          --input-bar-width: 0;
          --input-label-color: var(--c-secondary-variant);
        }
      }
    }
  }
}