@use 'icons' as *;

$input-config: (
  'xs': (
    min-height: 24px,
    padding: 0 4px,
    font-size: 10px,
    line-height: 10px,
  ),
  'sm': (
    min-height: 32px,
    padding: 0 6px,
    font-size: 12px,
    line-height: 16px,
  ),
  'md': (
    min-height: 36px,
    padding: 0 8px,
    font-size: 12px,
    line-height: 18px,
  ),
  'lg': (
    min-height: 40px,
    padding: 0 12px,
    font-size: 14px,
    line-height: 20px,
  ),
  'xl': (
    min-height: 48px,
    padding: 0 16px,
    font-size: 16px,
    line-height: 22px,
  ),
);

// #### Generate Size Classes
.form-control {
  border: 1px solid var(--brand-100);
  border-radius: 4px;
  color: var(--secondary-500);
  font-family: var(--font-family);
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
  @each $size, $value in $input-config {
    &-#{$size} {
      @extend %icon-#{$size};
      @each $prop-name, $prop-value in $value {
        --btn-#{$size}-#{$prop-name}: #{$prop-value};
        #{$prop-name}: var(--btn-#{$size}-#{$prop-name});
      }
    }
  }

  &:focus-visible {
    border: 1px solid var(--brand-300);
    color: var(--secondary-500);
    // @extend :focus-visible;
  }
}

.form-check-input {
  margin-top: 0;
}