/* =========================
   Forms / Input
   Figma: Inputs / Text Field.
========================= */

@use "sass:color";
@use "../kit-deps" as *;

.form-group {
  display: flex;
  flex-direction: column;
  gap: $space-1;
  width: 100%;
  max-width: 600px;

  .label {
    display: flex;
    flex-direction: column;
    gap: $space-1;
    font-size: 14px;
    font-weight: $font-weight-semibold;
    color: $neutral-900;
    position: relative;

    .vmk-icon {
      position: absolute;
      left: $space-3;
      bottom: $space-3;
      color: $neutral-700;
      font-size: $icon-size-md;
      pointer-events: none;
      transition: color $motion-base $motion-ease;
    }

    &.is-required::after {
      content: "*";
      color: $danger-text;
      margin-left: $space-1;
    }
  }

  .input {
    min-height: 48px;
    padding: $space-3 $space-4;
    font-family: $font-family-base;
    font-size: 15px;
    font-weight: $font-weight-medium;
    line-height: 1.25;
    color: $neutral-900;
    background-color: $neutral-0;
    border: $border-width-base $border-style-base $neutral-400;
    border-radius: $radius-md;
    transition:
      border-color $motion-base $motion-ease,
      box-shadow $motion-base $motion-ease,
      background-color $motion-base $motion-ease;

    &:hover:not(:disabled):not([readonly]) {
      border-color: $mint-600;
    }

    &:focus {
      outline: none;
      border-color: $mint-600;
      box-shadow: 0 0 0 3px #{rgba($mint-600, 0.24)};
      background-color: $neutral-0;
    }

    &::placeholder {
      color: $neutral-600;
      font-weight: $font-weight-regular;
    }

    &:disabled {
      color: $neutral-500;
      background-color: $neutral-50;
      border-color: $neutral-300;
      cursor: not-allowed;
      opacity: 0.72;
    }

    &[readonly] {
      color: $neutral-700;
      background-color: $neutral-50;
      border-color: $neutral-300;
    }

    &.input-sm {
      min-height: 40px;
      padding: $space-2 $space-3;
      font-size: 14px;
      border-radius: $radius-sm;
    }

    &.input-lg {
      min-height: 56px;
      padding: $space-3 $space-5;
      font-size: 16px;
      border-radius: $radius-lg;
    }

    &.input-icon-left {
      padding-left: $space-8;
    }

    &.input-icon-right {
      padding-right: $space-8;
    }
  }

  .input-help {
    font-size: 13px;
    color: $neutral-700;
    margin: 0;

    &.is-error   { color: $danger-text; }
    &.is-success { color: $success-text; }
    &.is-warning { color: $warning-text; }
  }

  &.is-error .input:not(:focus) {
    border-color: $danger-text;
    background-color: $danger-bg;

    &:hover {
      border-color: color.adjust($danger-text, $lightness: -8%);
    }
  }

  &.is-success .input:not(:focus) {
    border-color: $success-text;
    background-color: $success-bg;
  }

  &.is-warning .input:not(:focus) {
    border-color: $warning-text;
    background-color: $warning-bg;
  }
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: $space-4;
  width: 100%;
  max-width: 760px;

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}