@use 'sass:math';

$tab-item-indicator-height: 3px;

.Tabs {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.TabList {
  display: flex;
  justify-content: space-between;
  width: 100%;
  box-shadow: 0 -1px 0 0 var(--color-fill-neutral-light) inset;

  &:where(.size-l) {
    height: 53px;
  }

  &:where(.size-m) {
    height: 45px;
  }

  &:where(.size-s) {
    height: 33px;
  }
}

.TabItems {
  display: flex;
}

.TabItemButton {
  position: relative;
  top: 4px;

  overflow: visible;

  box-sizing: border-box;

  background-color: transparent;

  transition:
    background-color var(--motion-transition-fast),
    box-shadow var(--motion-transition-fast);

  &::after {
    content: '';

    position: absolute;
    right: 1px;
    bottom: calc(-8px + $tab-item-indicator-height);
    left: 1px;

    height: 0;

    background-color: var(--color-fill-accent-blue-heavier);
    border-radius: math.div($tab-item-indicator-height, 2);

    transition: height var(--motion-transition-fast);
  }

  &:where(.size-s) {
    min-width: 24px;
    height: 24px;
    padding: 0 4px;
    border-radius: var(--radius-8);

    & :where(.TabItemButtonText) {
      padding: 0 3px;
    }
  }

  &:where(.size-m) {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: var(--radius-8);
  }

  &:where(.size-l) {
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border-radius: var(--radius-12);
  }

  &:where(.size-m, .size-l) {
    & :where(.TabItemButtonContent) {
      gap: 2px;
    }

    & :where(.TabItemButtonText) {
      padding: 0 4px;
    }
  }

  &:where(.active, :hover):where(:not(:disabled)) {
    background-color: var(--color-fill-neutral-light);
  }

  /* NOTE: If there is no text, button is square, so padding is 0 */
  &:not(:has(.TabItemButtonText)) {
    padding: 0;
  }

  &:disabled {
    cursor: not-allowed;
    opacity: var(--opacity-disabled);
  }

  /* stylelint-disable-next-line no-descending-specificity */
  &:where([data-state='active']) {
    color: var(--color-text-accent-blue);

    &::after {
      height: $tab-item-indicator-height;
    }

    &:hover {
      background-color: inherit;
    }
  }

  /* stylelint-disable-next-line no-descending-specificity */
  &:where([data-state='inactive']) {
    color: var(--color-text-neutral-lighter);

    &:hover {
      color: var(--color-text-neutral-light);
    }
  }
}

.TabActions {
  display: flex;
}

.TabAction {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
  width: 100%;
  margin: 4px 0 5px;

  color: var(--color-text-accent-blue);
  text-decoration: none;

  transition: background-color var(--motion-transition-fast);

  &:where(.size-l, .size-m) {
    padding: 0 14px;
  }

  &:where(.size-l) {
    border-radius: var(--radius-12);
  }

  &:where(.size-m) {
    border-radius: var(--radius-8);
  }

  &:where(.size-s) {
    padding: 0 7px;
    border-radius: var(--radius-6);
  }

  &:where(:focus-visible) {
    outline: 3px solid var(--color-state-action-light);
  }

  &:hover {
    background-color: var(--color-fill-accent-blue);
  }
}