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

$tabs: (
  margin-bottom: var(--s-l),
  separator-width: 1px,
  separator-color: var(--c-d-20),
  item: (
    border-radius: 4px 4px 0 0,
    color: var(--c-d-80),
    font: var(--f-ui-m),
    margin-end: var(--s-2xs),
    padding: var(--s-xs) var(--s-m),
  ),
  hover: (
    color: var(--c-p-140),
    separator-color: var(--c-p),
  ),
  active: (
    background: map.get($color, 'white'),
    separator-color: map.get($color, 'white'),
    border-width: 1px,
    highlight-width: 4px,
    highlight-color: var(--c-p),
    color: var(--c-p),
    padding-top: calc(var(--s-xs) - 4px),
  ),
  more: (
    font-weight: map.get($font-weight, 'regular'),
    highlight-width: 4px,
    highlight-color: var(--c-p),
    active-separator-color: map.get($color, 'white'),
    color-open: var(--c-d),
    background-open: var(--c-p-20),
  ),
  overflow: (
    background: var(--c-p),
    color: map.get($color, 'white'),
    background-hover: var(--c-p),
    color-hover: map.get($color, 'white'),
  ),
  dropdown: (
    shadow: var(--sh-1),
    container-padding: 0,
    list-margin: 0,
    item-padding: var(--s-s) var(--s-m),
    item-color: var(--c-d),
    item-active-background: var(--c-p-20),
    item-active-color: var(--c-d),
  ),
);
