@use 'sass:map';
@use 'flexy-sys-color' as *;
@use 'flexy-sys-palette' as *;
@use 'flexy-sys-ref' as *;
@use 'flexy-sys-shape' as *;

$_flexy-comp-tabs: (
  tab-height: calc(40px + 4px * $flexy-sys-ref-density),
  tab-padding: calc(16px + 2px * $flexy-sys-ref-density),
  tab-spacing: 8px,
  tab-shape: map.get($flexy-sys-shape, 'small'),
  tab-indicator-height: 2px,
  tab-indicator-color: $flexy-sys-color-primary,
  tab-selected-fill-color: transparent,
  tab-selected-label-color: $flexy-sys-color-on-surface,
  tab-unselected-fill-color: transparent,
  tab-unselected-label-color: $flexy-sys-palette-grey-80,
  tablist-divider-height: 1px,
  tablist-divider-color: $flexy-sys-palette-grey-20,
  tablist-divider-margin: calc(16px + 2px * $flexy-sys-ref-density),
  tablist-fill-color: transparent,
  tablist-height: calc(48px + 4px * $flexy-sys-ref-density),
  tablist-shape: 0px,
  tablist-spacing: 4px,
  tablist-padding: 0px,
);

$flexy-comp-tabs: ();

@each $name, $value in $_flexy-comp-tabs {
  @if not $flexy-sys-ref-hardcode-values {
    $value: var(--flexy-comp-tabs-#{$name}, #{$value});
  }
  $flexy-comp-tabs: map.set($flexy-comp-tabs, $name, $value);
}