sparkletown/sparkle

@import "scss/constants";

$icon-width: 2.5rem;

.InputField {
  position: relative;

  &--icon-start {
    .InputField__input {
      padding-left: $icon-width;
    }
  }

  &--icon-end {
    .InputField__input {
      padding-right: $icon-width;
    }
  }

  &--invalid {
    margin-bottom: 1.5rem;

    .InputField__input {
      border: 1px solid var(--danger--under);
      &:focus {
        border: 1px solid var(--accent--over-10a);
        box-shadow: 0 0 0 2px var(--danger--under-rgb);
      }
    }
  }

  &__input {
    border: 1px solid var(--accent--over-10a);
    border-radius: 22px;
    height: 100%;

    &:-webkit-autofill,
    &:-webkit-autofill:hover,
    &:-webkit-autofill:focus,
    &:-webkit-autofill:active {
      -webkit-text-fill-color: var(--content--over);
      box-shadow: box-shadow--input-autofill(var(--content--under-80a)) inset;
    }
  }

  &__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    height: 100%;
    width: $icon-width;
    z-index: z(input-icon);

    &--start {
      left: 0;
    }

    &--end {
      right: 0;
    }

    & > * {
      opacity: 0.2;
      max-width: 100%;
    }

    &--clickable {
      cursor: pointer;

      &:hover > * {
        opacity: 1;
      }
    }
  }

  &__error {
    color: var(--danger--under);
    font-size: 0.8rem;
    position: absolute;
    bottom: -1.3rem;
    left: 2.8%;
  }
}