@layer ui-reset, ui;

/* tab-links */
@layer ui {
  @scope (.tab-links) to (.tab-links .tab-links) {
    :scope {
      --bg: var(--ui-neutral-200);
      --bg-active: var(--ui-neutral-50);
      --fg: var(--ui-neutral-800);
      --fg-hover: var(--ui-neutral-950);
      --fg-active: var(--ui-neutral-950);
      --ui-tab-links-name: ui-tab-links;
      background-color: var(--bg);
      border-radius: calc(var(--ui-rounded-3) + 1px);
      -webkit-user-select: none;
      user-select: none;
      anchor-name: --ui-active-tab-link;
      anchor-scope: --ui-active-tab-link;
      width: fit-content;
      max-width: 100%;
      display: flex;
      position: relative;

      & > a[aria-current]:not([aria-current="false"]) {
        anchor-name: --ui-active-tab-link;
      }

      &:before {
        content: "";
        top: calc(anchor(top) + 1px);
        left: calc(anchor(left) + 1px);
        right: calc(anchor(right) + 1px);
        bottom: calc(anchor(bottom) + 1px);
        z-index: 0;
        border-radius: var(--ui-rounded-3);
        background-color: var(--bg-active);
        pointer-events: none;
        position-anchor: --ui-active-tab-link;
        view-transition-name: var(--ui-tab-links-name);
        view-transition-class: ui-tab-links;
        position: absolute;
      }

      &.morph:before {
        view-transition-name: none;
        transition: var(--ease-glide) .2s;

        @media (prefers-reduced-motion: reduce) {
          transition: none;
        }
      }

      &.morph > a {
        view-transition-name: none;
      }

      &:not(:has( > a[aria-current]:not([aria-current="false"]))):before {
        opacity: 0;
      }

      & > a {
        view-transition-name: match-element;
        view-transition-class: ui-tab-link;
        align-items: center;
        gap: var(--ui-spacing-2);
        padding-block: var(--ui-spacing-2);
        padding-inline: var(--ui-spacing-4);
        color: var(--fg);
        white-space: nowrap;
        border-radius: var(--ui-rounded-3);
        z-index: 1;
        line-height: 1.14286rem;
        text-decoration: none;
        transition: color .1s;
        display: inline-flex;

        & > svg {
          flex-shrink: 0;
        }

        @media (hover: hover) {
          &:hover {
            color: var(--fg-hover);
          }
        }

        &[aria-current]:not([aria-current="false"]) {
          color: var(--fg-active);
        }

        &:focus-visible {
          outline: 2px solid var(--ui-neutral-950);
          outline-offset: 2px;
        }

        &[aria-disabled="true"] {
          opacity: .4;
          cursor: default;
          pointer-events: none;
        }
      }
    }
  }

  ::view-transition-group(.ui-tab-links) {
    animation-duration: .2s;
    animation-timing-function: var(--ease-glide);
  }

  ::view-transition-old(.ui-tab-links) {
    mix-blend-mode: normal;
    width: 100%;
    height: 100%;
    animation: none;
  }

  ::view-transition-new(.ui-tab-links) {
    mix-blend-mode: normal;
    width: 100%;
    height: 100%;
    animation: none;
  }

  ::view-transition-group(.ui-tab-link) {
    animation-duration: .2s;
    animation-timing-function: var(--ease-glide);
  }

  ::view-transition-old(.ui-tab-link) {
    animation-duration: .2s;
    animation-timing-function: var(--ease-glide);
  }

  ::view-transition-new(.ui-tab-link) {
    animation-duration: .2s;
    animation-timing-function: var(--ease-glide);
  }

  @media (prefers-reduced-motion: reduce) {
    ::view-transition-group(.ui-tab-links) {
      animation-duration: 1ms;
    }

    ::view-transition-group(.ui-tab-link) {
      animation-duration: 1ms;
    }

    ::view-transition-old(.ui-tab-link) {
      animation-duration: 1ms;
    }

    ::view-transition-new(.ui-tab-link) {
      animation-duration: 1ms;
    }
  }
}