/* The platform's own controls, styled from the design tokens (Doc/GUI/DesignTokens). Every colour
   is a --mw-* token; there is no literal here. Controls are native elements, so these are ordinary
   rules — no ::part(), no shadow DOM. */

/* ── Button (MwButton) ─────────────────────────────────────────────────────────────────────── */

.mw-button {
    --mw-button-bg: var(--mw-surface-1);
    --mw-button-fg: var(--mw-text);
    --mw-button-border: var(--mw-border);
    --mw-button-bg-hover: var(--mw-surface-2);
    --mw-button-bg-active: var(--mw-surface-3);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--mw-button-border);
    border-radius: var(--mw-radius-m);
    background: var(--mw-button-bg);
    color: var(--mw-button-fg);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.mw-button:hover {
    background: var(--mw-button-bg-hover);
}

.mw-button:active {
    background: var(--mw-button-bg-active);
}

.mw-button:focus-visible {
    outline: 2px solid var(--mw-focus);
    outline-offset: 2px;
}

.mw-button--accent,
.mw-button--filled {
    --mw-button-bg: var(--mw-accent);
    --mw-button-fg: var(--mw-accent-on);
    --mw-button-border: transparent;
    --mw-button-bg-hover: var(--mw-accent-hover);
    --mw-button-bg-active: var(--mw-accent-active);
}

.mw-button--outline {
    --mw-button-bg: transparent;
    --mw-button-border: var(--mw-border-strong);
}

.mw-button--stealth {
    --mw-button-bg: transparent;
    --mw-button-border: transparent;
}

.mw-button--lightweight,
.mw-button--hypertext {
    --mw-button-bg: transparent;
    --mw-button-fg: var(--mw-accent-text);
    --mw-button-border: transparent;
    --mw-button-bg-hover: transparent;
    --mw-button-bg-active: transparent;
    padding-inline: 4px;
}

.mw-button--lightweight:hover,
.mw-button--hypertext:hover {
    text-decoration: underline;
}

.mw-button--icon-only {
    width: 32px;
    padding: 0;
}

.mw-button:disabled,
.mw-button--disabled {
    opacity: 0.45;
    cursor: not-allowed;
    /* Hit testing stays ON — a disabled or busy button must still show its tooltip (the
       owner's "Working…" status) and its cursor. The disabled attribute, a link's removed href
       and MwButton's click guard already stop activation. */
}

/* A pressed-and-waiting button is disabled but must still read as PRESSED, not as unavailable. */
.mw-button[aria-busy="true"] {
    opacity: 0.8;
    cursor: progress;
}

.mw-button__label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-button__icon {
    flex: none;
    width: 16px;
    height: 16px;
}

.mw-button__spinner {
    flex: none;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: mw-spin 0.8s linear infinite;
}

@keyframes mw-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .mw-button { transition: none; }
    .mw-button__spinner { animation-duration: 2.4s; }
}

/* ── The cover's CTA pill (ported from the fluent-button rules in standard-page-layout.css, which
   stay until MenuItemView moves too). The caller sets --cta-* on the element; with none set, the
   accent pill is a chunkier accent button and a quiet pill is the NEUTRAL fill with an edge — never
   the accent fill (CtaPillAppearanceTest). ── */

.mw-button.cta-pill {
    --mw-button-bg: var(--cta-bg, var(--mw-surface-1));
    --mw-button-fg: var(--cta-fg, var(--mw-text));
    --mw-button-border: var(--mw-border);
    border-radius: var(--cta-radius, var(--mw-radius-pill));
    padding: var(--cta-padding, 12px 22px);
    min-height: 0;
    font-size: 15px;
    font-weight: 600;
}

.mw-button.cta-pill.mw-button--accent,
.mw-button.cta-pill.mw-button--filled {
    --mw-button-bg: var(--cta-bg, var(--mw-accent));
    --mw-button-fg: var(--cta-fg, var(--mw-accent-on));
    --mw-button-border: transparent;
}

.mw-button.cta-pill:hover {
    background: var(--mw-button-bg);
    filter: brightness(0.94);
}

/* Disabled pill = the PLACEHOLDER state: same size and shape, only the contrast says "not yet". */
.mw-button.cta-pill:disabled {
    opacity: 0.55;
    cursor: default;
}

/* The split button is ONE pill: the two halves give up their inner corners. */
.mw-button.split-button-primary {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.mw-button.split-button-more {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}