@use '../../theme/styles' as theme;

.wr-tabs {
  --wr-tabs-border: var(--wr-color-light);
  --wr-tabs-color: var(--wr-color-medium);
  --wr-tabs-color-hover: var(--wr-color-dark);
  --wr-tabs-color-active: var(--wr-color-primary);
  --wr-tabs-indicator: var(--wr-color-primary);
  --wr-tabs-font-size: var(--wr-control-font-size-md);
  --wr-tabs-line-height: var(--wr-control-line-height-md);
  --wr-tabs-padding-y: 0.625rem;
  --wr-tabs-padding-x: 1rem;

  display: block;
  // Claim the full row even when nested in a flex-row demo wrapper.
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  font-family: var(--wr-font-family-base);

  // Sizes — wire the (previously inert) `size` input to the control fonts.
  &--sm {
    --wr-tabs-font-size: var(--wr-control-font-size-sm);
    --wr-tabs-line-height: var(--wr-control-line-height-sm);
    --wr-tabs-padding-y: 0.5rem;
    --wr-tabs-padding-x: 0.75rem;
  }

  &--lg {
    --wr-tabs-font-size: var(--wr-control-font-size-lg);
    --wr-tabs-line-height: var(--wr-control-line-height-lg);
    --wr-tabs-padding-y: 0.75rem;
    --wr-tabs-padding-x: 1.25rem;
  }

  &__strip {
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
    // The hairline is an inset shadow, not `border-bottom` — the strip
    // clips overflow (see below), which would cut off tabs pulled down
    // with a negative margin; the shadow lets the active indicator paint
    // directly over the line instead.
    box-shadow: inset 0 -1px 0 var(--wr-tabs-border);
    // `overflow-x: auto` alone reserves space for a vertical scrollbar in
    // browsers that don't use overlay scrollbars (Firefox/some Safari) —
    // showing a stray vertical bar on the right of the strip. Force-hide
    // the y-axis since the strip is always a single row.
    overflow-x: auto;
    overflow-y: hidden;

    // Edge fades — when the strip overflows, the side that still has tabs to
    // scroll to fades out, cueing that there's more. `--wr-tabs-fade-*` default
    // to 0 (no fade); the `--fade-start` / `--fade-end` modifiers below turn an
    // edge on from the component's scroll metrics, so a non-scrolling strip is
    // never masked.
    --wr-tabs-fade: 1.5rem;
    --wr-tabs-fade-start: 0px;
    --wr-tabs-fade-end: 0px;
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 var(--wr-tabs-fade-start),
      #000 calc(100% - var(--wr-tabs-fade-end)),
      transparent 100%
    );
  }

  &--fade-start &__strip {
    --wr-tabs-fade-start: var(--wr-tabs-fade);
  }

  &--fade-end &__strip {
    --wr-tabs-fade-end: var(--wr-tabs-fade);
  }

  &__tab {
    appearance: none;
    background: transparent;
    border: 0;
    text-decoration: none;
    padding: var(--wr-tabs-padding-y) var(--wr-tabs-padding-x);
    color: var(--wr-tabs-color);
    font: inherit;
    font-size: var(--wr-tabs-font-size);
    font-weight: 500;
    line-height: var(--wr-tabs-line-height);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition:
      color var(--wr-transition-base),
      border-color var(--wr-transition-base);

    &:hover:not(.wr-tabs__tab--active):not(.wr-tabs__tab--disabled):not(:disabled) {
      color: var(--wr-tabs-color-hover);
    }

    &--active {
      color: var(--wr-tabs-color-active);
      border-bottom-color: var(--wr-tabs-indicator);
    }

    &--disabled,
    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  &__panel {
    padding-top: 1rem;
  }
}