/**
 * Tab — PimentCSS v1
 */
@use "../abstracts/variables" as v;

.#{v.class-seg()}tabs {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.#{v.class-seg()}tabs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: v.$tab-list-gap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.#{v.class-seg()}tabs__separator {
  display: block;
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: v.$border-width-1 solid var(--border-primary);
}

/* --- Tab item --- */
.#{v.class-seg()}tab {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: v.$tab-item-gap;
  min-height: v.$tab-min-height;
  padding: v.$tab-item-py v.$tab-item-px;
  border: 0;
  border-bottom: v.$tab-indicator-width solid transparent;
  border-radius: v.$border-radius-4 v.$border-radius-4 0 0;
  background: transparent;
  color: var(--text-body);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-medium);
  letter-spacing: var(--letter-spacing-body-medium);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
  transition:
    background-color v.$motion-duration-fast v.$motion-easing,
    border-color v.$motion-duration-fast v.$motion-easing,
    color v.$motion-duration-fast v.$motion-easing;

  &:hover:not(:disabled):not([aria-disabled="true"]):not(.#{v.class-seg()}tab--selected):not([aria-selected="true"]),
  &.#{v.class-seg()}tab--hover:not(.#{v.class-seg()}tab--selected):not([aria-selected="true"]) {
    background: var(--surface-action-hover-2);
    color: var(--text-action);
  }

  &:focus-visible {
    outline: v.$border-width-2 solid var(--border-focus);
    outline-offset: 2px;
    z-index: 1;
  }

  &--selected,
  &[aria-selected="true"] {
    border-bottom-color: var(--border-action);
    color: var(--text-heading);
    font-weight: var(--font-weight-semi-bold);

    &:hover:not(:disabled):not([aria-disabled="true"]),
    &.#{v.class-seg()}tab--hover {
      background: var(--surface-action-hover-2);
      border-bottom-color: var(--border-action-hover);
      color: var(--text-action);
    }
  }

  &:disabled,
  &[aria-disabled="true"],
  &.#{v.class-seg()}tab--disabled {
    color: var(--text-on-disabled);
    cursor: not-allowed;

    &.#{v.class-seg()}tab--selected,
    &[aria-selected="true"] {
      border-bottom-color: var(--border-disabled);
    }
  }
}

.#{v.class-seg()}tab__icon {
  flex-shrink: 0;
  width: v.$tab-icon-size;
  height: v.$tab-icon-size;
  color: currentColor;
}

.#{v.class-seg()}tab__label {
  flex-shrink: 0;
}

.#{v.class-seg()}tab-panel {
  padding-top: var(--space-4);
}

.#{v.class-seg()}tab-panel[hidden] {
  display: none;
}