@use 'sass:map';
@use '../settings/_colors.scss';

/**
 * Centering input text and label.
 *
 * 1. Override `style` attribute.
 * 2. Align input text to center.
 * 3. Fix label centering after `scaleY` animation, using `transition font-size` instead.
 * 4.a. Textarea border bottom.
 * 4.b. Textarea border on hover.
 * 4.c. Textarea border on focus.
 * 5. Disable border bottom animation.
 */
.login-form {
  &__button {
    min-width: 126px;
  }

  .v-label {
    /* [1] */
    width: 100% !important;
    max-width: 100% !important;
    left: 0;
    font-weight: 400;
    justify-content: space-around;

    &.v-field-label {
      transform-origin: center center;
    }
  }

  .v-input {
    input {
      text-align: center; /* [2] */
      font-weight: 400;
      font-size: 14px;
    }

    .v-label--active {
      /* [3] */
      transition: font 0.3s ease;
      transform: translateY(-18px);
      -webkit-transform: translateY(-18px);
      font-size: 12px;
    }

    .v-input__control > .v-field > .v-field__outline:before {
      /* [4] */
      border-bottom-width: 1px;
    }

    .v-input__control > .v-field > .v-field__outline:after {
      /* [5] */
      transition: unset;
    }
  }
}

/** Themes **/
.v-theme--light {
  .login-form {
    .v-input input {
      color: map.get(colors.$adm-colors, 'regular');
    }

    .v-text-field > .v-input__control > .v-field > .v-field__outline:before {
      /* [4.a.] */
      border-color: rgba(0, 0, 0, 0.12);
    }

    .v-text-field > .v-input__control > .v-field.v-field--focused > .v-field__outline:hover:before {
      /* [4.b.] */
      border-color: rgba(0, 0, 0, 0.12);
    }

    .v-text-field > .v-input__control > .v-field.v-field--focused > .v-field__outline:after {
      /* [4.c.] */
      border-width: 0 0 thin 0;
    }
  }
}
