@use 'sass:list';
@use 'sass:map';
@use '../utilities/functions' as *;
@use '../utilities/tokens.map' as *;
@use '../utilities/mixins' as *;

$types: color, email, number, password, search, tel, text, time, url;
$selectors: ();
$size: (
  lg: (
    padding: fluid(12),
    radius: radius(sm),
    scale: body--lg,
  ),
  md: (
    padding: fixed(8),
    radius: radius(xs),
    scale: body--md,
  ),
);

.form {
  &__group {
    @include flex(column, stretch, flex-start, fixed(8), nowrap);
  }

  @each $key, $props in $size {
    &__#{$key} label {
      @include font-scale(map.get($props, scale));
    }

    &__#{$key} input,
    &__#{$key} select {
      border-radius: map.get($props, radius);
      padding: map.get($props, padding);

      @include font-scale(map.get($props, scale));
    }
  }
}

label {
  color: text(heading);
}

@each $type in $types {
  $selectors: list.append($selectors, 'input[type="#{$type}"]', comma);
}

#{$selectors} {
  color: text(body);
  background-color: bg(surface, neutral);
  border: width(1) solid border(divisor);
  transition: all 0.2s ease-in-out;
  line-height: 1;
  box-sizing: border-box;

  &:hover {
    border: width(1) solid stroke(neutral);
  }

  &:focus {
    border: width(1) solid bg(container, primary);
    box-shadow: 0 0 0 3px lch(45.27% 113.1 310.44deg / 32%);
    outline: none;
  }
}