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

$tabs: (
  margin-bottom: var(--s-xl),
  separator-width: 2px,
  separator-color: var(--cm-border-neutral),
  item: (
    border-radius: 0,
    color: var(--cm-on-surface-brand),
    font: var(--f-m),
    margin-end: var(--s-3xs),
    padding: var(--s-xs) var(--s-m),
  ),
  hover: (
    color: var(--cm-on-surface-brand),
    separator-color: var(--cm-border),
  ),
  active: (
    background: var(--cm-surface-low-1),
    separator-color: var(--cm-border),
    border-width: 0,
    highlight-width: 0,
    highlight-color: transparent,
    color: var(--cm-on-surface-brand),
    padding-top: var(--s-xs),
    font-weight: map.get($font-weight, 'semi-bold'),
  ),
  more: (
    font-weight: map.get($font-weight, 'regular'),
    highlight-width: 0,
    highlight-color: transparent,
    active-separator: 2px solid var(--cm-border),
    color-open: var(--cm-on-surface-primary-highest),
    border-color-open: var(--cm-border-primary-highest),
    background-open: var(--cm-surface-primary-low-0),
  ),
  dropdown: (
    shadow: var(--sh-2),
    container-padding: var(--s-5xl),
    list-margin: calc(-1 * var(--s-xs)) calc(-1 * var(--s-m)),
    item-padding: var(--s-xs) var(--s-m),
    item-color: var(--cm-on-surface-brand),
    item-active-background: var(--cm-surface-low-1),
    item-active-color: var(--cm-on-surface-brand),
    font-weight: map.get($font-weight, 'regular'),
  ),
);