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

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

  @include int.sans($size: "100", $role: "label");

  &.lg {
    --caret-space: 32px;
    --caret-size: 14px;
    --padding-x: #{int.$spacing-4};
    --padding-y: #{int.$spacing-3};

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

  --caret-space: 18px;
  --caret-size: 12px;
  --padding-x: #{int.$spacing-3};
  --padding-y: #{int.$spacing-2};
}