@layer ui-reset, ui;

/* tabs */
@layer ui {
  @scope (.tabs) to (.tabs .tabs) {
    :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);
      width: -webkit-fill-available;
      width: -moz-available;
      width: stretch;

      &:has( > [role="tabpanel"]) {
        display: grid;

        & [role="tabpanel"] {
          grid-area: 2 / 1;
        }
      }
    }

    [role="tablist"] {
      background-color: var(--bg);
      border-radius: calc(var(--ui-rounded-3) + 1px);
      anchor-name: --hovered-link;
      anchor-scope: --hovered-link;
      width: fit-content;
      display: flex;
      position: relative;

      @media (width < 600px) {
        font-size: 16px;
      }

      & > label:has(input:checked) {
        anchor-name: --hovered-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: --hovered-link;
        transition: var(--ease-glide-3);
        position: absolute;
      }

      & > label {
        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;
        z-index: 1;
        line-height: 1.14286rem;
        transition: color .1s;
        display: inline-flex;

        & > input[type="radio"] {
          opacity: 0;
          pointer-events: none;
          position: absolute;
        }

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

        &:has(input:checked) {
          color: var(--fg-active);
        }

        &:has(input:focus-visible) {
          outline: 2px solid var(--ui-neutral-950);
          outline-offset: 2px;
          border-radius: var(--ui-rounded-3);
        }

        &:has(input:disabled) {
          opacity: .4;
          cursor: default;
          pointer-events: none;
        }
      }
    }

    [role="tabpanel"]:focus-visible {
      outline: 2px solid var(--ui-neutral-950);
      outline-offset: 4px;
      border-radius: var(--ui-rounded-2);
    }

    [role="tabpanel"] {
      transition: opacity var(--ease-glide-3),
      display 50ms ease allow-discrete;
      opacity: 0;
      display: none;
    }

    :scope:not(.tabs [role="tabpanel"] .tabs):has([role="tablist"]:not(.tabs .tabs [role="tablist"]) label:nth-child(1 of label) input:checked) [role="tabpanel"]:not(.tabs [role="tabpanel"] [role="tabpanel"]):nth-child(1 of [role="tabpanel"]) {
      opacity: 1;
      display: block;

      @starting-style {
        opacity: 0;
      }
    }

    :scope:not(.tabs [role="tabpanel"] .tabs):has([role="tablist"]:not(.tabs .tabs [role="tablist"]) label:nth-child(2 of label) input:checked) [role="tabpanel"]:not(.tabs [role="tabpanel"] [role="tabpanel"]):nth-child(2 of [role="tabpanel"]) {
      opacity: 1;
      display: block;

      @starting-style {
        opacity: 0;
      }
    }

    :scope:not(.tabs [role="tabpanel"] .tabs):has([role="tablist"]:not(.tabs .tabs [role="tablist"]) label:nth-child(3 of label) input:checked) [role="tabpanel"]:not(.tabs [role="tabpanel"] [role="tabpanel"]):nth-child(3 of [role="tabpanel"]) {
      opacity: 1;
      display: block;

      @starting-style {
        opacity: 0;
      }
    }

    :scope:not(.tabs [role="tabpanel"] .tabs):has([role="tablist"]:not(.tabs .tabs [role="tablist"]) label:nth-child(4 of label) input:checked) [role="tabpanel"]:not(.tabs [role="tabpanel"] [role="tabpanel"]):nth-child(4 of [role="tabpanel"]) {
      opacity: 1;
      display: block;

      @starting-style {
        opacity: 0;
      }
    }

    :scope:not(.tabs [role="tabpanel"] .tabs):has([role="tablist"]:not(.tabs .tabs [role="tablist"]) label:nth-child(5 of label) input:checked) [role="tabpanel"]:not(.tabs [role="tabpanel"] [role="tabpanel"]):nth-child(5 of [role="tabpanel"]) {
      opacity: 1;
      display: block;

      @starting-style {
        opacity: 0;
      }
    }

    :scope:not(.tabs [role="tabpanel"] .tabs):has([role="tablist"]:not(.tabs .tabs [role="tablist"]) label:nth-child(6 of label) input:checked) [role="tabpanel"]:not(.tabs [role="tabpanel"] [role="tabpanel"]):nth-child(6 of [role="tabpanel"]) {
      opacity: 1;
      display: block;

      @starting-style {
        opacity: 0;
      }
    }

    :scope:not(.tabs [role="tabpanel"] .tabs):has([role="tablist"]:not(.tabs .tabs [role="tablist"]) label:nth-child(7 of label) input:checked) [role="tabpanel"]:not(.tabs [role="tabpanel"] [role="tabpanel"]):nth-child(7 of [role="tabpanel"]) {
      opacity: 1;
      display: block;

      @starting-style {
        opacity: 0;
      }
    }

    :scope:not(.tabs [role="tabpanel"] .tabs):has([role="tablist"]:not(.tabs .tabs [role="tablist"]) label:nth-child(8 of label) input:checked) [role="tabpanel"]:not(.tabs [role="tabpanel"] [role="tabpanel"]):nth-child(8 of [role="tabpanel"]) {
      opacity: 1;
      display: block;

      @starting-style {
        opacity: 0;
      }
    }

    :scope:is(.tabs [role="tabpanel"] .tabs):not(.tabs [role="tabpanel"] .tabs [role="tabpanel"] .tabs):has([role="tablist"]:not(.tabs .tabs .tabs [role="tablist"]) label:nth-child(1 of label) input:checked) [role="tabpanel"]:not(.tabs [role="tabpanel"] [role="tabpanel"] [role="tabpanel"]):nth-child(1 of [role="tabpanel"]) {
      opacity: 1;
      display: block;

      @starting-style {
        opacity: 0;
      }
    }

    :scope:is(.tabs [role="tabpanel"] .tabs):not(.tabs [role="tabpanel"] .tabs [role="tabpanel"] .tabs):has([role="tablist"]:not(.tabs .tabs .tabs [role="tablist"]) label:nth-child(2 of label) input:checked) [role="tabpanel"]:not(.tabs [role="tabpanel"] [role="tabpanel"] [role="tabpanel"]):nth-child(2 of [role="tabpanel"]) {
      opacity: 1;
      display: block;

      @starting-style {
        opacity: 0;
      }
    }

    :scope:is(.tabs [role="tabpanel"] .tabs):not(.tabs [role="tabpanel"] .tabs [role="tabpanel"] .tabs):has([role="tablist"]:not(.tabs .tabs .tabs [role="tablist"]) label:nth-child(3 of label) input:checked) [role="tabpanel"]:not(.tabs [role="tabpanel"] [role="tabpanel"] [role="tabpanel"]):nth-child(3 of [role="tabpanel"]) {
      opacity: 1;
      display: block;

      @starting-style {
        opacity: 0;
      }
    }

    :scope:is(.tabs [role="tabpanel"] .tabs):not(.tabs [role="tabpanel"] .tabs [role="tabpanel"] .tabs):has([role="tablist"]:not(.tabs .tabs .tabs [role="tablist"]) label:nth-child(4 of label) input:checked) [role="tabpanel"]:not(.tabs [role="tabpanel"] [role="tabpanel"] [role="tabpanel"]):nth-child(4 of [role="tabpanel"]) {
      opacity: 1;
      display: block;

      @starting-style {
        opacity: 0;
      }
    }

    :scope:is(.tabs [role="tabpanel"] .tabs):not(.tabs [role="tabpanel"] .tabs [role="tabpanel"] .tabs):has([role="tablist"]:not(.tabs .tabs .tabs [role="tablist"]) label:nth-child(5 of label) input:checked) [role="tabpanel"]:not(.tabs [role="tabpanel"] [role="tabpanel"] [role="tabpanel"]):nth-child(5 of [role="tabpanel"]) {
      opacity: 1;
      display: block;

      @starting-style {
        opacity: 0;
      }
    }

    :scope:is(.tabs [role="tabpanel"] .tabs):not(.tabs [role="tabpanel"] .tabs [role="tabpanel"] .tabs):has([role="tablist"]:not(.tabs .tabs .tabs [role="tablist"]) label:nth-child(6 of label) input:checked) [role="tabpanel"]:not(.tabs [role="tabpanel"] [role="tabpanel"] [role="tabpanel"]):nth-child(6 of [role="tabpanel"]) {
      opacity: 1;
      display: block;

      @starting-style {
        opacity: 0;
      }
    }

    :scope:is(.tabs [role="tabpanel"] .tabs):not(.tabs [role="tabpanel"] .tabs [role="tabpanel"] .tabs):has([role="tablist"]:not(.tabs .tabs .tabs [role="tablist"]) label:nth-child(7 of label) input:checked) [role="tabpanel"]:not(.tabs [role="tabpanel"] [role="tabpanel"] [role="tabpanel"]):nth-child(7 of [role="tabpanel"]) {
      opacity: 1;
      display: block;

      @starting-style {
        opacity: 0;
      }
    }

    :scope:is(.tabs [role="tabpanel"] .tabs):not(.tabs [role="tabpanel"] .tabs [role="tabpanel"] .tabs):has([role="tablist"]:not(.tabs .tabs .tabs [role="tablist"]) label:nth-child(8 of label) input:checked) [role="tabpanel"]:not(.tabs [role="tabpanel"] [role="tabpanel"] [role="tabpanel"]):nth-child(8 of [role="tabpanel"]) {
      opacity: 1;
      display: block;

      @starting-style {
        opacity: 0;
      }
    }

    :scope:is(.tabs [role="tabpanel"] .tabs [role="tabpanel"] .tabs):has([role="tablist"] label:nth-child(1 of label) input:checked) [role="tabpanel"]:nth-child(1 of [role="tabpanel"]) {
      opacity: 1;
      display: block;

      @starting-style {
        opacity: 0;
      }
    }

    :scope:is(.tabs [role="tabpanel"] .tabs [role="tabpanel"] .tabs):has([role="tablist"] label:nth-child(2 of label) input:checked) [role="tabpanel"]:nth-child(2 of [role="tabpanel"]) {
      opacity: 1;
      display: block;

      @starting-style {
        opacity: 0;
      }
    }

    :scope:is(.tabs [role="tabpanel"] .tabs [role="tabpanel"] .tabs):has([role="tablist"] label:nth-child(3 of label) input:checked) [role="tabpanel"]:nth-child(3 of [role="tabpanel"]) {
      opacity: 1;
      display: block;

      @starting-style {
        opacity: 0;
      }
    }

    :scope:is(.tabs [role="tabpanel"] .tabs [role="tabpanel"] .tabs):has([role="tablist"] label:nth-child(4 of label) input:checked) [role="tabpanel"]:nth-child(4 of [role="tabpanel"]) {
      opacity: 1;
      display: block;

      @starting-style {
        opacity: 0;
      }
    }

    :scope:is(.tabs [role="tabpanel"] .tabs [role="tabpanel"] .tabs):has([role="tablist"] label:nth-child(5 of label) input:checked) [role="tabpanel"]:nth-child(5 of [role="tabpanel"]) {
      opacity: 1;
      display: block;

      @starting-style {
        opacity: 0;
      }
    }

    :scope:is(.tabs [role="tabpanel"] .tabs [role="tabpanel"] .tabs):has([role="tablist"] label:nth-child(6 of label) input:checked) [role="tabpanel"]:nth-child(6 of [role="tabpanel"]) {
      opacity: 1;
      display: block;

      @starting-style {
        opacity: 0;
      }
    }

    :scope:is(.tabs [role="tabpanel"] .tabs [role="tabpanel"] .tabs):has([role="tablist"] label:nth-child(7 of label) input:checked) [role="tabpanel"]:nth-child(7 of [role="tabpanel"]) {
      opacity: 1;
      display: block;

      @starting-style {
        opacity: 0;
      }
    }

    :scope:is(.tabs [role="tabpanel"] .tabs [role="tabpanel"] .tabs):has([role="tablist"] label:nth-child(8 of label) input:checked) [role="tabpanel"]:nth-child(8 of [role="tabpanel"]) {
      opacity: 1;
      display: block;

      @starting-style {
        opacity: 0;
      }
    }
  }
}