/* ===========================================
   Tabs
   ===========================================
   Underlined text tabs on a hairline.
   =========================================== */

@layer components {
  .tabs {
    .tabs__list {
      display: flex;
      align-items: stretch;
      gap: var(--space-6);
      margin: 0 0 var(--space-6);
      padding: 0;
      overflow-x: auto;
      border-bottom: 1px solid var(--color-border);

      .tabs__item {
        margin: 0;
        list-style-type: none;
      }

      .tabs__link,
      .tab__link {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        min-height: 2.75rem;
        margin-bottom: -1px;
        padding: 0;
        font-size: var(--text-base);
        font-weight: var(--font-medium);
        white-space: nowrap;
        color: var(--color-text-muted);
        text-decoration: none;
        background: none;
        border: 0;
        border-bottom: 2px solid transparent;
        cursor: pointer;

        &:hover {
          color: var(--color-text);
          border-bottom-color: var(--color-gray-400);
        }

        &.is-active,
        &[aria-current="page"],
        &[aria-selected="true"] {
          font-weight: var(--font-semibold);
          color: var(--color-text);
          border-bottom-color: var(--color-text);
        }

        &:focus-visible {
          outline: 3px solid var(--color-focus);
          outline-offset: 2px;
        }
      }
    }

    .tabs__panels {
      margin-top: var(--space-6);

      [hidden] {
        display: none;
      }
    }
  }
}