/*
 * Button — Figma "button" (4041:37) and "button-icone" (4045:153).
 *
 * **The 2px stroke of both sets is drawn outside their frame.** Scanned on the component page: every
 * bordered variant paints from two rows above the frame to two rows below it, so the 40px frame is
 * 44px on screen and its inside stays 40. `Scale/500` is therefore the interior of a button, not its
 * box. The auto-layout padding, on the other hand, is measured from the frame, so `border 2 +
 * padding 24` reproduces the maquette exactly and only the height had to be given the stroke back.
 * The reading, and how to replay it, are in docs/technique/transcription-maquette.md.
 *
 * Four types x four states. Hover and Onclick are mapped to :hover and
 * :active; Disabled to :disabled and [aria-disabled="true"], so a link
 * rendered as a button behaves the same.
 *
 * Type reading of the maquettes:
 *  - primary   : filled call to action on a light background
 *  - secondary : outlined call to action on a light background
 *  - tertiary  : the same button placed over a dark background or an image
 *  - ghost     : bare text action, no box
 *
 * Icons inherit the label colour through currentColor.
 */

.mo-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mo-spacing-xxs);
    height: calc(var(--mo-scale-500) + 2 * var(--mo-border-width-xs));
    padding-inline: var(--mo-scale-300);
    border: var(--mo-border-width-xs) solid transparent;
    border-radius: var(--mo-radius-sm);
    background-color: transparent;
    font-family: var(--mo-font-family);
    font-size: var(--mo-font-size-btn);
    font-weight: var(--mo-font-weight-bold);
    line-height: var(--mo-line-height-btn);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.mo-button__icon {
    flex: none;
    width: var(--mo-scale-250);
    height: var(--mo-scale-250);
}

/*
 * `display: inline-flex` above ties with the user agent rule for [hidden] on specificity, and wins
 * on source order — which would leave, for instance, the "Filtrer" toggle of `C7` on screen for a
 * visitor whose browser never runs the script meant to reveal it.
 */
.mo-button[hidden] {
    display: none;
}

/* Primary */
.mo-button--primary {
    background-color: var(--mo-surface-action-dark);
    border-color: var(--mo-border-action);
    color: var(--mo-text-default-light);
}

.mo-button--primary:hover:not(:disabled, [aria-disabled='true']) {
    background-color: var(--mo-surface-default-white);
    border-color: var(--mo-border-action);
    color: var(--mo-text-action);
}

.mo-button--primary:active:not(:disabled, [aria-disabled='true']) {
    background-color: var(--mo-surface-action-hover);
    border-color: var(--mo-border-action-hover);
    color: var(--mo-text-default-light);
}

/* Secondary */
.mo-button--secondary {
    background-color: var(--mo-surface-default-white);
    border-color: var(--mo-border-action);
    color: var(--mo-text-action);
}

.mo-button--secondary:hover:not(:disabled, [aria-disabled='true']) {
    background-color: var(--mo-surface-action-dark);
    border-color: var(--mo-border-action);
    color: var(--mo-text-default-light);
}

.mo-button--secondary:active:not(:disabled, [aria-disabled='true']) {
    background-color: var(--mo-surface-default-white);
    border-color: var(--mo-border-action-hover);
    color: var(--mo-text-action-hover);
}

.mo-button--secondary:disabled,
.mo-button--secondary[aria-disabled='true'] {
    background-color: var(--mo-surface-default-white);
    border-color: var(--mo-border-disabled);
}

/* Tertiary — same action, over a dark background or an image. */
.mo-button--tertiary {
    background-color: var(--mo-surface-default-white);
    border-color: var(--mo-border-default-light);
    color: var(--mo-text-action);
}

.mo-button--tertiary:hover:not(:disabled, [aria-disabled='true']) {
    background-color: transparent;
    border-color: var(--mo-border-default-light);
    color: var(--mo-text-default-light);
}

.mo-button--tertiary:active:not(:disabled, [aria-disabled='true']) {
    background-color: var(--mo-surface-action-hover);
    border-color: var(--mo-border-action-hover);
    color: var(--mo-text-default-light);
}

/* Ghost — bare text action, no box. */
.mo-button--ghost {
    padding-inline: 0;
    border-color: transparent;
    background-color: transparent;
    color: var(--mo-text-action);
}

.mo-button--ghost:hover:not(:disabled, [aria-disabled='true']) {
    gap: var(--mo-spacing-xs);
}

.mo-button--ghost .mo-button__icon {
    width: var(--mo-scale-200);
    height: var(--mo-scale-200);
}

/* Disabled — shared by primary and tertiary, refined above for secondary. */
.mo-button:disabled,
.mo-button[aria-disabled='true'] {
    background-color: var(--mo-surface-disabled);
    border-color: transparent;
    color: var(--mo-text-disabled);
    cursor: not-allowed;
}

.mo-button--ghost:disabled,
.mo-button--ghost[aria-disabled='true'] {
    background-color: transparent;
}

/*
 * Icon-only button: square, no label. The accessible name comes from the
 * `label` property of the Twig component, rendered as aria-label.
 */
/* `button-icone` (4045:153): a square of the same 40px interior, stroked outside like the rest. */
.mo-button--icon-only {
    width: calc(var(--mo-scale-500) + 2 * var(--mo-border-width-xs));
    padding-inline: 0;
}