@use "../../../../styles/tokens/color";
@use "../../../../styles/tools/convert";
@use "../../styles/config" as commonConfig;

$base: (
  border-radius: convert.to-rem(5px),
  background-image:
    url("data:image/svg+xml,%3Csvg width='14' height='7' viewBox='0 0 14 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H14L7 7L0 0Z' fill='%23000'/%3E%3C/svg%3E%0A"),
  background-repeat: no-repeat,
  background-position: right 10px center,
  font-weight: bold,
  appearance: none,
  -webkit-appearance: none,
  color: color.$black,
  overflow: hidden,
);

$states: (
  default: commonConfig.$default,
  focus: commonConfig.$focus,
  disabled: commonConfig.$disabled,
  invalid: commonConfig.$invalid,
);

$sizes: (
  default: (
    height: convert.to-rem(40px),
    padding: convert.to-rem(8px) convert.to-rem(34px) convert.to-rem(8px)
      convert.to-rem(8px),
  ),
  large: (
    height: convert.to-rem(50px),
    padding: convert.to-rem(13px) convert.to-rem(34px) convert.to-rem(13px)
      convert.to-rem(13px),
  ),
);

$widths: (
  default: (
    width: 100%,
    max-width: convert.to-rem(350px),
  ),
  12ch: (
    max-width: convert.to-rem(160px),
  ),
  shrink: (
    width: auto,
  ),
  fullwidth: (
    width: 100%,
    max-width: none,
  ),
);