/* -- Toggle Group component ------------------------------------- */

@layer components {
  .toggle-group {
    display: inline-flex;
    align-items: center;
    gap: 0.0625rem;

    /* -- Outline variant: propagate border + shadow to children -- */
    &[data-variant="outline"] > .toggle {
      border: 1px solid var(--input);
      background: transparent;
      box-shadow: var(--shadow-xs);

      &:hover {
        background-color: var(--accent);
        color: var(--accent-foreground);
      }

      &[aria-pressed="true"] {
        background-color: var(--accent);
        color: var(--accent-foreground);
      }
    }

    /* Collapse double borders on connected outline items */
    &[data-variant="outline"]:not([data-spacing]) > .toggle:not(:first-child) {
      margin-inline-start: -1px;
    }

    &[data-variant="outline"]:not([data-spacing])[data-orientation="vertical"] > .toggle:not(:first-child) {
      margin-inline-start: 0;
      margin-block-start: -1px;
    }

    /* -- Sizes: propagate to child toggles ---------------------- */
    &[data-size="sm"] > .toggle {
      height: 2rem;
      padding: 0 0.375rem;
      min-width: 2rem;

      & svg { width: 0.875rem; height: 0.875rem; }
    }

    &[data-size="lg"] > .toggle {
      height: 2.5rem;
      padding: 0 0.625rem;
      min-width: 2.5rem;

      & svg { width: 1.125rem; height: 1.125rem; }
    }

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

    /* -- Connected borders: merge adjacent toggle radii --------- */
    & > .toggle:not(:first-child) {
      border-start-start-radius: 0;
      border-end-start-radius: 0;
    }

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

    &[data-orientation="vertical"] {
      & > .toggle:not(:first-child) {
        border-start-start-radius: 0;
        border-start-end-radius: 0;
        border-end-start-radius: var(--radius-md);
      }

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

    /* -- Spacing: adds gap and restores individual radii --------- */
    &[data-spacing] {
      gap: 0.25rem;

      & > .toggle {
        border-radius: var(--radius-md);
      }
    }

    /* -- Disabled group ----------------------------------------- */
    &[data-disabled] {
      pointer-events: none;

      & > .toggle {
        pointer-events: none;
        opacity: 0.5;
      }
    }
  }

  /* -- Accessibility -------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .toggle-group .toggle {
      transition: none;
    }
  }

  @media (forced-colors: active) {
    .toggle-group > .toggle {
      border-color: ButtonBorder;

      &[aria-pressed="true"] {
        background-color: Highlight;
        color: HighlightText;
        border-color: Highlight;
      }

      &:focus-visible {
        outline-color: Highlight;
      }
    }
  }
}