@use 'sass:map';
@use '../index' as *;

$select: (
  font: var(--f-s),
  arrow-width: 3rem,
  border-color-focus: var(--cm-on-surface-primary),
  border-radius: map.get($border-radius, 's'),
  border-color: var(--cm-on-surface-grey-medium),
  border-color-hover: var(--cm-on-surface-grey),
  border-color-invalid: var(--cm-border-status-error),
  border-color-invalid-hover: var(--cm-border-status-error),
  border-color-invalid-focus: var(--cm-border-status-error),
  border-color-disabled: var(--cm-border-grey-lowest),
  background-disabled: var(--cm-surface-grey-low-0-transparent),
  opacity-disabled: 1,
  color-disabled: var(--cm-on-surface-grey),
  border-width: 1px,
  border-width-focus: 2px,
  color-input: var(--cm-on-surface-brand),
  color-placeholder: var(--cm-on-surface-grey-medium),
  group-separator-color: var(--cm-border-neutral),
  group-title-font: 'microcopy-m',
  group-title-font-weight: map.get($font-weight, 'semi-bold'),
  group-title-color: var(--cm-on-surface-brand),
  shadow: none,
  shadow-hover: var(--sh-1),
  arrow-background-color: #fff,
  arrow-background-color-hover: #fff,
  arrow-background-color-invalid: #fff,
  arrow-background-color-invalid-hover: #fff,
  icon-fill: var(--cm-on-surface-brand),
  icon-size: map.get($icon, 'xs'),
  padding-inline-start: var(--s-s),
  multiple: (
    select-all-after: true,
    counter-font: 'microcopy-s',
    counter-color: var(--cm-on-surface-brand),
    counter-background: var(--cm-surface-low-2),
    counter-padding: var(--s-3xs),
    dropdown-background-color: #fff,
    dropdown-border: none,
    dropdown-separator-color: transparent,
    dropdown-toolbar-separator-color: transparent,
    dropdown-border-radius: map.get($border-radius, 'xs'),
    dropdown-shadow: var(--sh-2),
    dropdown-margin: var(--s-2xs),
    dropdown-input-margin: var(--s-m) var(--s-m) var(--s-s),
    dropdown-input-width: calc(100% - (var(--s-m) * 2)),
    dropdown-container-max-height: 16rem,
  ),
);