/* -- Button Group component ------------------------------------- */

@layer components {
  .btn-group {
    display: inline-flex;
    align-items: stretch;

    /* Collapse borders between adjacent buttons */
    & > .btn + .btn {
      margin-inline-start: -1px;
    }

    /* Remove internal radii for connected appearance. The orientation gate is
       :where()-wrapped so these INLINE-corner rules only ever apply to
       horizontal groups; ungated they also squared vertical buttons' corners
       at a higher specificity than the vertical block below, leaving "Top"
       with a rounded top-left but a square top-right (issue #13). */
    &:where(:not([data-orientation="vertical"])) > .btn:not(:first-child):not(:has(+ [role="separator"])) {
      border-start-start-radius: 0;
      border-end-start-radius: 0;
    }

    &:where(:not([data-orientation="vertical"])) > .btn:not(:last-child):not([role="separator"] + .btn) {
      border-start-end-radius: 0;
      border-end-end-radius: 0;
    }

    /* Buttons after a separator get start radii back */
    & > [role="separator"] + .btn {
      border-start-start-radius: var(--radius-md);
      border-end-start-radius: var(--radius-md);
    }

    /* Buttons before a separator get end radii back */
    & > .btn:has(+ [role="separator"]) {
      border-start-end-radius: var(--radius-md);
      border-end-end-radius: var(--radius-md);
    }

    /* Ensure hovered/focused button stacks above its neighbors */
    & > .btn:hover,
    & > .btn:focus-visible {
      position: relative;
      z-index: 1;
    }

    /* -- Separator ------------------------------------------- */
    & > [role="separator"] {
      width: 1px;
      align-self: stretch;
      background: var(--border);
      border: 0;
      margin: 0;
      padding: 0;
      flex-shrink: 0;
    }

    /* -- Vertical orientation -------------------------------- */
    &[data-orientation="vertical"] {
      flex-direction: column;
      align-items: stretch;

      & > .btn + .btn {
        margin-inline-start: 0;
        margin-top: -1px;
      }

      /* Square exactly the BLOCK corners that touch a neighbour — a
         non-first button squares its top edge, a non-last its bottom
         edge; the base .btn radius keeps every outer corner rounded on
         both sides. No per-corner "restore" overrides: the last block's
         restores re-rounded a corner the previous block had just
         squared, which (together with the ungated horizontal rules)
         produced the asymmetric Top/Middle corners of issue #13. */
      & > .btn:not(:first-child) {
        border-start-start-radius: 0;
        border-start-end-radius: 0;
      }

      & > .btn:not(:last-child) {
        border-end-start-radius: 0;
        border-end-end-radius: 0;
      }

      & > [role="separator"] {
        width: auto;
        height: 1px;
      }
    }
  }

  @media (forced-colors: active) {
    .btn-group > [role="separator"] {
      background: ButtonText;
    }
  }
}