@use "../../../styles/int.scss";

$target-sizes: (
  "sm": (
    "caret-space": 18px,
    "caret-size": 12px,
    "padding-x": int.$spacing-3,
    "padding-y": int.$spacing-2,
    "text-size": "100",
  ),
  "lg": (
    "caret-space": 32px,
    "caret-size": 14px,
    "padding-x": int.$spacing-4,
    "padding-y": int.$spacing-3,
    "text-size": "200",
  ),
);

@mixin choose-target($size, $caret) {
  @if not map-has-key($target-sizes, $size) {
    @error "Invalid size `#{$size}` provided to choose-target. "
      + "Available sizes are: #{map-keys($target-sizes)}.";
  }

  $sizes: map-get($target-sizes, $size);
  $caret-space: map-get($sizes, "caret-space");
  $caret-size: map-get($sizes, "caret-size");
  $padding-x: map-get($sizes, "padding-x");
  $padding-y: map-get($sizes, "padding-y");
  $text-size: map-get($sizes, "text-size");

  display: block;
  width: 100%;
  appearance: none;
  border: none;
  border-radius: 8px;
  background: white;
  color: int.$warmgray-80;
  padding: $padding-y calc($padding-x + $caret-space) $padding-y $padding-x;
  background-image: url("#{$caret}");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: calc($padding-x + $caret-space) $caret-size;
  cursor: pointer;
  text-align: left;

  @include int.shadow($size: "200");
  @include int.sans($size: $text-size, $role: "label");
}
