@use '../variables';
@use "../theme/shadows.tokens";
@use "../theme/spacing.tokens";
@use "../theme/tabs.tokens";
@use "../theme/transitions.tokens";
@use "../theme/typography.tokens";

.pa-tabs-list {
  display: flex;
  gap: tabs.$gap-between-tabs;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  white-space: nowrap;

  &.pa-full-width-tabs {
    pa-tab {
      flex-grow: 1;
    }
  }

  &:not(.no-slider) pa-tab .pa-tabs-link::after {
    background: tabs.$color-tab-slider;
    bottom: 0;
    content: '';
    height: tabs.$height-tab-slider;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 0;
  }
}

pa-tab {
  display: inline-block;
  min-width: 0;

  .pa-tab-item {
    line-height: 0;
  }

  .pa-tabs-link {
    background: tabs.$color-background-tab-link;
    border: none;
    color: tabs.$color-text-tab-link;
    font-size: tabs.$font-size-tab-item;
    font-weight: tabs.$font-weight-tab-item;
    line-height: typography.line-height(l);
    padding: 0;
    text-transform: tabs.$text-transform-tab-item;
    transition: all transitions.$transition-response;
    width: 100%;

    &:hover {
      background: tabs.$color-background-tab-link-hover;
      transition: all transitions.$transition-response;

      &:not([aria-expanded='true']) {
        color: tabs.$color-text-tab-link;
        cursor: pointer;
      }
    }

    &[aria-expanded='true'] {
      background: tabs.$color-background-tab-link-active;
      color: tabs.$color-text-tab-link-active;
      cursor: default;
      font-weight: tabs.$font-weight-tab-item-active;
    }

    &.pa-keyboard-focus {
      box-shadow: unset;
      .pa-tabs-link-wrapper {
        box-shadow: shadows.$shadow-focus;
      }
    }

    .pa-tabs-link-wrapper {
      align-items: center;
      display: block;
      overflow: hidden;
      padding: tabs.$padding-tab-item-small;
      position: relative;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
      z-index: 1;
    }
  }
}

.pa-tabs-slider {
  background: tabs.$color-tab-slider-active;
  bottom: 0;
  left: 0;
  height: spacing.rhythm(0.25);
  position: absolute;
  transition:
    left transitions.$transition-response,
    width transitions.$transition-response;
}

@media (min-width: spacing.$size-viewport-medium-min) {
  pa-tab .pa-tabs-link .pa-tabs-link-wrapper {
    padding: tabs.$padding-tab-item-medium;
  }
}