/* form-input.style.css */

.form-input-group {
  position: relative;
  display: flex;
  flex-direction: column-reverse;

  input {
    grid-column: 1/4;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    width: 100%;
    height: 36px;
    margin-bottom: 39px;
    color: var(--color-text-primary);
    font: inherit;
    padding: 0;

    &:focus-visible {
      outline: none;
    }

    &:placeholder-shown ~ .form-input-label {
      top: 6px;
      opacity: 0.5;
      font-size: inherit;
    }

    &:focus ~ .form-input-label,
    &:not(:placeholder-shown) ~ .form-input-label {
      top: -20px;
      opacity: 1;
      font-size: 10px;
    }
  }

  .form-input-label {
    position: absolute;
    color: var(--color-text-primary);
    text-transform: uppercase;
    transition: 300ms ease all;
    pointer-events: none;
    font-size: 12px;
  }
}

input {
  &:autofill,
  &:-webkit-autofill:hover,
  &:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-text-primary);
    -webkit-box-shadow: 0 0 0px 1000px #111 inset;
  }
}