@use "../base/color" as cl;
@use "../base/border" as bo;
@use "../base/font" as ft;
@use "../base/space" as sp;

// Tabs
//
//   <nav class="qo-tabs">
//     <button class="qo-tab qo-tab-active">Users</button>
//     <button class="qo-tab">User Roles</button>
//   </nav>

.qo-tabs {
  display: flex;
  align-items: center;
  gap: sp.$space-6;
  height: 56px;

  &.qo-tabs-sm { height: 40px; gap: sp.$space-4; }
  &.qo-tabs-pill { gap: sp.$space-2; height: auto; }

  @media (max-width: 768px) { height: 40px; }
}

.qo-tab {
  position: relative;
  height: 56px;
  padding: 0 2px;
  display: inline-flex;
  align-items: center;
  border: 0;
  background: transparent;
  color: cl.$text-darker;
  font-family: ft.$font-family-primary;
  font-size: ft.$font-size-lg;
  font-weight: ft.$font-weight-medium;
  cursor: pointer;
  transition: color 0.2s ease;

  &:hover { color: cl.$text-primary; }
  &:focus-visible { outline: 0; box-shadow: cl.$focus-ring; border-radius: bo.$border-radius-sm; }

  &:disabled { opacity: 0.48; cursor: not-allowed; }

  // The 2px underline is drawn on a pseudo-element so the tab does not shift
  // by 2px when it becomes active.
  &.qo-tab-active {
    color: cl.$text-primary;
    font-weight: ft.$font-weight-semibold;

    &::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: bo.$border-width-md;
      background-color: cl.$background-primary;
    }
  }

  .qo-tabs-sm & { height: 40px; }

  // Pill tabs: filled chip instead of an underline.
  .qo-tabs-pill & {
    height: auto;
    padding: sp.$space-2 sp.$space-3;
    border-radius: bo.$border-radius-pill;

    &.qo-tab-active {
      background-color: cl.$background-primary-soft;
      &::after { content: none; }
    }
  }

  @media (max-width: 768px) { height: 40px; }
}