:where(:root),
:where(:host) {
  --vaadin-tab-border-radius: var(--vaadin-radius-m);
  --vaadin-tab-font-weight: var(--aura-font-weight-medium);
  --vaadin-tabs-gap: 2px;
  --vaadin-tabs-border-radius: calc(var(--vaadin-tab-border-radius) + var(--vaadin-tabs-padding));
  --vaadin-tabs-padding: 3px;
}

vaadin-tabs {
  contain: paint;
  --aura-surface-level: -0.5;
  --aura-surface-opacity: 0.3;
  background: var(--vaadin-tabs-background, var(--vaadin-background-container));
}

vaadin-tabs::part(tabs) {
  padding: 3px;
  margin: -3px;
  --_mask-fade-start: 0.5lh;
  --_mask-fade-size: 2lh;
  mask-image: linear-gradient(
    var(--_mask-dir, to right),
    var(--_mask-start, black) var(--_mask-fade-start),
    black var(--_mask-fade-size),
    black calc(100% - var(--_mask-fade-size)),
    var(--_mask-end, black) calc(100% - var(--_mask-fade-start))
  );
}

vaadin-tabs[dir='rtl']::part(tabs) {
  --_mask-dir: to left;
}

vaadin-tabs[orientation='vertical']::part(tabs) {
  --_mask-dir: to bottom;
  --_mask-fade-start: 0px;
  --_mask-fade-size: 0.5lh;
}

vaadin-tabs[overflow~='start'] {
  --_mask-start: transparent;
}

vaadin-tabs[overflow~='end'] {
  --_mask-end: transparent;
}

vaadin-tabs::part(back-button),
vaadin-tabs::part(forward-button) {
  background: var(--aura-background-color) padding-box;
  border: 1px solid var(--vaadin-border-color-secondary);
  border-radius: var(--vaadin-radius-m);
  padding: var(--vaadin-padding-xs);
  height: auto;
  align-self: center;
  box-shadow: var(--aura-shadow-s);
  transition: opacity 120ms;
}

vaadin-tabs::part(back-button) {
  inset-inline-start: 5px;
}

vaadin-tabs::part(forward-button) {
  inset-inline-end: 5px;
}

vaadin-tab {
  transition:
    color 120ms,
    border-color 120ms,
    background-color 120ms;
  border: var(--vaadin-tab-border-width, 1px) solid var(--vaadin-tab-border-color, transparent);
}

vaadin-tab:not([disabled], [selected]):hover {
  --vaadin-tab-text-color: var(--vaadin-text-color);
}

vaadin-tab[selected] {
  --aura-surface-level: 5;
  --aura-surface-opacity: 0.8;
  --vaadin-tab-background: var(--aura-surface-color);
  --vaadin-tab-text-color: var(--aura-accent-text-color);
  box-shadow:
    0 0 0 1px light-dark(hsl(0deg, 100%, 0%, 0.02), transparent),
    var(--aura-shadow-s);
  border-color: light-dark(transparent, hsl(0deg, 100%, 100%, 0.03));
}

/* Filled variant */

vaadin-tabs[theme~='filled'] > vaadin-tab[selected] {
  --vaadin-tab-background: var(--aura-accent-color) border-box;
  --vaadin-tab-text-color: var(--aura-accent-contrast-color);
  --vaadin-text-color: var(--aura-accent-contrast-color);
  --vaadin-text-color-secondary: color-mix(in srgb, var(--aura-accent-contrast-color) 70%, transparent);
  --vaadin-text-color-disabled: color-mix(in srgb, var(--aura-accent-contrast-color) 50%, transparent);
  --vaadin-icon-color: var(--aura-accent-contrast-color);
  outline-offset: 1px;
}