/*
 * Small uppercase pill of the back office tables — Figma instances named "tag-tutoriel"
 * (4701:21345 and siblings) on the "Phrase promotionnelle" screen.
 *
 * It carries the same box as the portal `.mo-tag` — 4px radius, Spacing/xxxs by Spacing/xxs of
 * padding, caption-strong type — but a different palette and an uppercase transform, and two of its
 * four uses are controls rather than labels. It is therefore its own component: folding it into
 * `.mo-tag` would mean adding back office variants to a portal component and teaching that
 * component to be a button.
 */

.mo-admin-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mo-spacing-xxxs);
    padding: var(--mo-spacing-xxxs) var(--mo-spacing-xxs);
    border: none;
    border-radius: var(--mo-radius-sm);
    font-family: inherit;
    font-size: var(--mo-font-size-caption);
    font-weight: var(--mo-font-weight-caption-strong);
    line-height: var(--mo-line-height-caption);
    text-transform: uppercase;
    white-space: nowrap;
}

/*
 * `display: inline-flex` above ties with the user agent rule for [hidden] on specificity, and wins
 * on cascade order — restated here so a badge used as a control (the "Annuaire" pencil button) can
 * still be hidden by the `hidden` attribute, the same pattern as .mo-button[hidden].
 */
.mo-admin-badge[hidden] {
    display: none;
}

/* "MODIFIER" and "SUPPRIMER" only — value pills pass no `icon`. */
.mo-admin-badge__icon {
    flex: none;
    width: var(--mo-scale-300);
    height: var(--mo-scale-300);
}

/*
 * The trash glyph reads visibly smaller than the pencil at the same box size — its two vertical
 * bars leave more of the 24x24 viewBox empty than the pencil's corner-to-corner stroke — so it is
 * sized up to carry the same visual weight.
 */
.mo-admin-badge__icon--trash {
    width: var(--mo-scale-350);
    height: var(--mo-scale-350);
}

/*
 * "MODIFIER" and "SUPPRIMER" replace their label with the icon above: square instead of
 * text-shaped. A fixed box (Scale/400, the icon-only control size used elsewhere in the design
 * system) rather than icon size plus padding, so the two controls land on the exact same
 * dimensions despite the pencil and trash icons not sharing a size.
 */
.mo-admin-badge--icon-only {
    width: var(--mo-scale-400);
    height: var(--mo-scale-400);
    padding: 0;
}

/* "OUI" — a value the row carries. */
.mo-admin-badge--success {
    background-color: var(--mo-surface-success);
    color: var(--mo-text-default-light);
}

/* "NON", and the "SUPPRIMER" control. */
.mo-admin-badge--error {
    background-color: var(--mo-surface-error);
    color: var(--mo-text-default-light);
}

/* "MODIFIER". */
.mo-admin-badge--warning {
    background-color: var(--mo-surface-secondary);
    color: var(--mo-text-default-dark);
}

/* Neutral value, for the columns the maquette does not colour. */
.mo-admin-badge--neutral {
    background-color: var(--mo-surface-default);
    color: var(--mo-text-body);
}

/*
 * Clickable variants. The maquette draws "MODIFIER" and "SUPPRIMER" as flat pills with no hover
 * state; a pointer, a hover shade and a focus ring are added here because they are controls, and a
 * control with no visible focus fails WCAG 2.1 SC 2.4.7.
 */
a.mo-admin-badge,
button.mo-admin-badge {
    cursor: pointer;
    text-decoration: none;
}

a.mo-admin-badge:hover,
button.mo-admin-badge:hover {
    filter: brightness(0.92);
}