/**
    Applies all the outline properties useful to show a dashed-focus ring around a component.
    TODO: replace `$border-radius: 0.1rem` with semantic border-radius but keep in mind some components that must stay at 2px border-radius: checkbox, radio, links, ...
 */
:host {
  --wcs-tabs-indicator-height: calc(var(--wcs-semantic-size-base) / 2);
  --wcs-tabs-indicator-background-color: var(--wcs-semantic-color-foreground-action-secondary-default);
  --wcs-tabs-indicator-border-radius: var(--wcs-semantic-border-radius-full);
  --wcs-tabs-color-default: var(--wcs-semantic-color-foreground-action-secondary-default);
  --wcs-tabs-color-hover: var(--wcs-semantic-color-foreground-action-secondary-hover);
  --wcs-tabs-color-press: var(--wcs-semantic-color-foreground-action-secondary-press);
  --wcs-tabs-color-selected: var(--wcs-semantic-color-foreground-action-secondary-default);
  --wcs-tabs-background-color-focus: var(--wcs-semantic-color-background-action-secondary-focus);
  --wcs-tabs-background-color-hover: var(--wcs-semantic-color-background-action-secondary-hover);
  --wcs-tabs-background-color-press: var(--wcs-semantic-color-background-action-secondary-press);
  --wcs-tabs-border-radius: var(--wcs-semantic-border-radius-base);
  --wcs-tabs-border-color-focus: var(--wcs-semantic-color-border-focus-base);
  --wcs-tabs-font-weight-default: var(--wcs-semantic-font-weight-roman);
  --wcs-tabs-font-weight-selected: var(--wcs-semantic-font-weight-roman);
  --wcs-tabs-padding-top: var(--wcs-semantic-spacing-base);
  --wcs-tabs-padding-right: var(--wcs-semantic-spacing-large);
  --wcs-tabs-padding-bottom: calc(var(--wcs-semantic-spacing-base) + var(--wcs-tabs-indicator-height));
  --wcs-tabs-padding-left: var(--wcs-semantic-spacing-large);
  --wcs-tabs-gutter-border-width: var(--wcs-semantic-border-width-default);
  --wcs-tabs-gutter-background-color: var(--wcs-semantic-color-border-secondary);
  --wcs-tabs-headers-border-bottom: var(--wcs-tabs-gutter-border-width) solid var(--wcs-tabs-gutter-background-color);
  --wcs-tabs-mobile-breakpoint: var(--wcs-phone-breakpoint-max-width, 575px);
  --wcs-tabs-mobile-overlay-border-width: var(--wcs-semantic-border-width-default);
  --wcs-tabs-mobile-overlay-border-color: var(--wcs-semantic-color-border-secondary);
  --wcs-tabs-mobile-overlay-background-color: var(--wcs-semantic-color-background-surface-primary);
  --wcs-tabs-mobile-overlay-padding: var(--wcs-semantic-spacing-base);
  --wcs-tabs-mobile-overlay-border-radius: var(--wcs-semantic-border-radius-base);
  --wcs-tabs-mobile-gap: var(--wcs-semantic-spacing-base);
  --wcs-tabs-mobile-padding: 0 var(--wcs-semantic-spacing-base);
  --wcs-tabs-mobile-height: var(--wcs-semantic-size-m);
  --wcs-tabs-mobile-font-weight-default: var(--wcs-semantic-font-weight-medium);
  --wcs-tabs-mobile-font-weight-active: var(--wcs-semantic-font-weight-black);
  --wcs-tabs-mobile-font-size: var(--wcs-semantic-font-size-base);
  --wcs-tabs-mobile-color: var(--wcs-semantic-color-text-primary);
  --wcs-tabs-mobile-background-color-default: var(--wcs-semantic-color-background-action-secondary-default);
  --wcs-tabs-mobile-background-color-focus: var(--wcs-semantic-color-background-action-secondary-focus);
  --wcs-tabs-mobile-background-color-hover: var(--wcs-semantic-color-background-action-secondary-hover);
  --wcs-tabs-mobile-background-color-press: var(--wcs-semantic-color-background-action-secondary-press);
  --wcs-tabs-mobile-border-radius: var(--wcs-semantic-border-radius-base);
  --wcs-tabs-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);
  display: block;
}

:host([align=start]) .wcs-tabs-headers {
  justify-content: start;
}

:host([align=end]) .wcs-tabs-headers {
  justify-content: end;
}

:host([align=center]) .wcs-tabs-headers {
  justify-content: center;
}

.wcs-tabs-headers {
  overflow-x: auto;
  display: flex;
  flex-direction: row;
  position: relative;
}

:host([gutter]) .wcs-tabs-headers {
  border-bottom: var(--wcs-tabs-headers-border-bottom);
}

.wcs-tab-header {
  position: relative;
  padding: var(--wcs-tabs-padding-top) var(--wcs-tabs-padding-right) var(--wcs-tabs-padding-bottom) var(--wcs-tabs-padding-left);
  border-radius: var(--wcs-tabs-border-radius) var(--wcs-tabs-border-radius) 0 0;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  transition: all var(--wcs-tabs-transition-duration) ease-out;
}
.wcs-tab-header span {
  text-align: center;
  color: var(--wcs-tabs-color-default);
  font-size: 1rem;
  font-weight: var(--wcs-tabs-font-weight-default);
}
.wcs-tab-header:hover {
  background-color: var(--wcs-tabs-background-color-hover);
}
.wcs-tab-header:hover span {
  color: var(--wcs-tabs-color-hover);
}
.wcs-tab-header:focus-visible > span {
  outline: var(--wcs-semantic-border-width-large) dashed var(--wcs-tabs-border-color-focus);
  outline-offset: var(--wcs-semantic-spacing-small);
  border-radius: 0.1rem;
}
.wcs-tab-header:active {
  background-color: var(--wcs-tabs-background-color-press);
}
.wcs-tab-header:active span {
  color: var(--wcs-tabs-color-press);
}

.active span {
  font-weight: var(--wcs-tabs-font-weight-selected);
  color: var(--wcs-tabs-color-selected);
}
.active::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  content: "";
  height: var(--wcs-tabs-indicator-height);
  background-color: var(--wcs-tabs-indicator-background-color);
  border-radius: var(--wcs-tabs-indicator-border-radius);
}

/* ============= */
/* region MOBILE */
/* ============= */
button {
  background-color: inherit;
}

#mobile-button {
  border: 0;
  font-family: var(--wcs-font-sans-serif), sans-serif;
  text-align: center;
  color: var(--wcs-tabs-color-default);
  font-size: 1rem;
  font-weight: var(--wcs-tabs-font-weight-default);
  padding-right: calc(0.75 * var(--wcs-tabs-padding-right)); /* reduce padding right because of the arrow */
}
#mobile-button span {
  display: flex;
  align-items: center;
}
#mobile-button .arrow {
  fill: var(--wcs-tabs-color-default);
}
#mobile-button:hover .arrow {
  fill: var(--wcs-tabs-color-hover);
}
#mobile-button:active .arrow {
  fill: var(--wcs-tabs-color-press);
}

.popover {
  display: none;
  z-index: 9999;
  overflow: hidden;
  border: var(--wcs-tabs-mobile-overlay-border-width) solid var(--wcs-tabs-mobile-overlay-border-color);
  border-radius: var(--wcs-tabs-mobile-overlay-border-radius);
  padding: var(--wcs-tabs-mobile-overlay-padding);
  background-color: var(--wcs-tabs-mobile-overlay-background-color);
}
.popover [role=tab] {
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  user-select: none;
  gap: var(--wcs-tabs-mobile-gap);
  padding: var(--wcs-tabs-mobile-padding);
  height: var(--wcs-tabs-mobile-height);
  font-weight: var(--wcs-tabs-mobile-font-weight-default);
  font-size: var(--wcs-tabs-mobile-font-size);
  color: var(--wcs-tabs-mobile-color);
  background-color: var(--wcs-tabs-mobile-background-color);
  border-radius: var(--wcs-tabs-mobile-border-radius);
  transition-duration: var(--wcs-tabs-transition-duration);
  transition-property: background-color, color;
  transition-timing-function: ease;
  overflow: hidden;
  white-space: nowrap;
}
.popover [role=tab]:focus {
  background-color: var(--wcs-tabs-mobile-background-color-focus);
}
.popover [role=tab]:focus-visible {
  outline: var(--wcs-semantic-border-width-large) dashed var(--wcs-semantic-color-border-focus-base);
  outline-offset: 0;
  border-radius: var(--wcs-tabs-mobile-border-radius);
}
.popover [role=tab]:hover {
  background-color: var(--wcs-tabs-mobile-background-color-hover);
}
.popover [role=tab]:active {
  background-color: var(--wcs-tabs-mobile-background-color-press);
}
.popover .mobile-active {
  font-weight: var(--wcs-tabs-mobile-font-weight-active);
}

.show {
  display: block;
}

/* ================ */
/* endregion MOBILE */
/* ================ */