// ponytail: SCSS modules cannot consume Tailwind utilities; one mixin keeps button focus treatment consistent.
@mixin focus-ring($mode) {
    outline: none !important;

    @if $mode == 'filled' {
        // The permanent 1px button border plus this 2px inset layer reproduces Figma's 3px
        // focus edge without changing the auto-sized button's layout footprint.
        border-color: var(--colors-focus-ring) !important;
        box-shadow: inset 0 0 0 2px var(--colors-focus-ring), inset 0 0 0 4px white !important;
    } @else {
        // Preserve each button's 1px border and complete Figma's 3px edge inside it.
        // This is layout-neutral for auto-sized text and quaternary buttons.
        border-color: var(--colors-focus-ring) !important;
        box-shadow: inset 0 0 0 2px var(--colors-focus-ring) !important;
    }

    @media (forced-colors: active) {
        forced-color-adjust: none;
        outline: 3px solid CanvasText !important;
        outline-offset: 0 !important;
        box-shadow: none !important;
    }
}