.form-control {
  min-height: 2rem;
  position: relative;
  border-color: $neutral-400;
  margin-bottom: 0;

  &.form-control-lg {
    min-height: 2.5rem;
  }

  &.form-control-sm {
    min-height: 1.5rem;
  }

  // Create an animated underline effect starting from center
  background-image: linear-gradient(to right, $neutral-950 0%, $neutral-950 100%);
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: center bottom;
  transition: background-size 0.3s ease-in-out,
  border-color 0.3s ease-in-out;

  &.filled {
    background-color: var(--#{$prefix}body-bg);
  }

  &.filled-darker {
    border-color: transparent;
    background-color: $neutral-100;
  }

  &.filled-lighter {
    border-color: transparent;
    background-color: $neutral-25;
  }

  &:hover {
    border-color: $black;
    color: $black;
  }

  &:active {
    border-color: $neutral-400;
    background-color: $neutral-100;
    color: $black;
    background-size: 100% 2px;
  }

  &:read-only,
  &[readonly] {
    border-color: $neutral-300;
    color: $black;
    pointer-events: none;

    &::placeholder {
      color: $neutral-500;
    }
  }

  &:focus-visible,
  &:focus {
    border-color: $neutral-700;
    outline: none !important;
    background-size: 100% 2px;
    box-shadow: $box-shadow;
  }

  &:disabled,
  &[disabled] {
    border-color: $neutral-300;
    background-color: var(--#{ $prefix}body-bg);
    color: $neutral-400;
    pointer-events: none;

    &::placeholder {
      color: $neutral-400;
    }

  }

  &:user-invalid,
  &.is-invalid {
    border-color: $error-700;
    background-image: linear-gradient(to right, $error-700 0%, $error-700 100%);

    &:hover {
      border-color: $error-700;
    }

    &:active {
      border-color: $neutral-400;
      background-size: 100% 2px;
    }

    &:read-only,
    &[readonly] {
      border-color: $neutral-300;
    }

    &:focus-visible,
    &:focus {
      border-color: $error-700;
    }

    &:disabled,
    &[disabled] {
      border-color: $neutral-300;
    }
  }

  &:user-valid,
  &.is-valid {
    border-color: $success-700;
    background-image: linear-gradient(to right, $success-700 0%, $success-700 100%);

    &:hover {
      border-color: $success-700;
    }
  }
}

.form-label {
  font-size: $font-size-sm;

  &.required {
      &::after {
        content: "*";
        color: $error-700;
        margin-inline-start: 0.25rem;
      }
  }

  &.disabled {
    color: $neutral-400;
    pointer-events: none;

    &::before {
      color: $neutral-400;
    }
  }
}

.form-label-lg {
  font-size: $font-size-base;
}

.input-group {
  border: $input-border-width solid $input-border-color;
  border-radius: $radius-sm;
  transition: background-size 0.3s ease-in-out, border-color 0.3s ease-in-out;

  overflow: hidden; // Ensures children don't bleed out of rounded corners in RTL/LTR mixed contexts

  // Create an animated underline effect using pseudo-element
  position: relative;

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, $neutral-950 0%, $neutral-950 100%);
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease-in-out;
  }


  .input-group-text {
    border: none;
    background: $neutral-100;
    color: $neutral-500;
    border-radius: 0; // Fix for RTL/LTR border radius issues

    &.subtle {
      background-color: var(--#{ $prefix}body-bg);
    }

  }

  .btn {
    border: none;
    box-shadow: none;
    border-radius: 0; // Fix for RTL/LTR border radius issues
  }


  .form-control,
  .form-select {
    border: none;
    box-shadow: none;
    border-radius: 0; // Fix for RTL/LTR border radius issues
    background-color: var(--#{$prefix}body-bg);
    background-image: linear-gradient(to right, transparent 0%, transparent 100%);
  }

  &:hover {
    border-color: $black;
    color: $black;
  }

  &:active {
    border-color: $neutral-400;
    background-color: $neutral-100;
    color: $black;

    &::after {
      transform: translateX(-50%) scaleX(1);
    }
  }

  &:focus-within {
    border-color: $neutral-700;
    outline: none;

    &::after {
      z-index: 5;
      transform: translateX(-50%) scaleX(1);
    }

    box-shadow: $box-shadow;
  }

  &:has(.form-control:read-only),
  &:has(.form-control[readonly]) {
    border-color: $neutral-300;
    color: $black;
    pointer-events: none;
  }


  &:has(.form-control:disabled),
  &:has(.form-control[disabled]) {
    border-color: $neutral-300;
    background-color: var(--#{ $prefix}body-bg);
    color: $neutral-400;
    pointer-events: none;

    &::after {
      transform: translateX(-50%) scaleX(0);
    }

    .form-control {
      border-color: $neutral-300;
      background-color: var(--#{ $prefix}body-bg);
      color: $neutral-400;
      pointer-events: none;
    }

    .input-group-text {
      background-color: $neutral-200;
      color: $neutral-400;
      pointer-events: none;

      &.subtle {
        background-color: var(--#{ $prefix}body-bg);
      }
    }
  }

  &:has(.form-control:user-invalid),
  &:has(.form-control.is-invalid),
  &.is-invalid {
    border-color: $error-700;

    &::after {
      background: linear-gradient(to right, $error-700 0%, $error-700 100%);
    }

    &:hover {
      border-color: $error-700;
    }

    &:active {
      border-color: $neutral-400;

      &::after {
        transform: translateX(-50%) scaleX(1);
      }
    }

    &:has(.form-control:read-only),
    &:has(.form-control[readonly]) {
      border-color: $neutral-300;
    }

    &:focus-within {
      border-color: $error-700;

      &::after {
        transform: translateX(-50%) scaleX(1);
      }
    }

    &:has(.form-control:disabled),
    &:has(.form-control[disabled]) {
      border-color: $neutral-300;
    }
  }

  &:has(.form-control:user-valid),
  &:has(.form-control.is-valid),
  &.is-valid {
    border-color: $success-700;

    &::after {
      background: linear-gradient(to right, $success-700 0%, $success-700 100%);
    }
  }
}