/* AG Mojave surfaces under the unlayered MudBlazor reset (temporary, until ADOPCION.md phase 2 step 1).
   MudBlazor.min.css still loads without a layer, and its reset (* margin/padding/border; button and label display,
   alignment, padding, background, radius, colour and cursor) beats every @layer mj.* rule, including the ones that
   style descendants such as `.mj-table td`. Inside a Mojave surface ([data-mj-surface], skin on) this file gives
   what Mud inside @layer mj.vendor would give:
   1. the same reset, inside mj.vendor, so a property Mojave does not set still resolves to Mud's value;
   2. unlayered rules at Mud's own specificity (0, and one type for button/label) that hand those properties back to
      the layers (revert-layer). An unlayered rule with higher specificity (Halo classes, scoped CSS) still wins, and
      nothing outside a surface changes.
   Mud's focus reset (outline) is not handed back: each surface restates its focus ring (the dashboard does it in
   DashboardMojave.razor.css with `.mjd :focus-visible`).
   Remove this file when MudBlazor moves to @layer mj.vendor. */

@layer mj.vendor {
    :where(:root[data-skin="mojave"] [data-mj-surface] *) {
        margin: 0;
        padding: 0;
        border-width: 0;
        border-style: solid;
    }

    :where(:root[data-skin="mojave"] [data-mj-surface]) :where(button) {
        display: inline-flex;
        position: relative;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
        color: inherit;
        background-color: transparent;
        border: 0;
        border-radius: 0;
        text-decoration: none;
        appearance: none;
        cursor: pointer;
        user-select: none;
    }

    :where(:root[data-skin="mojave"] [data-mj-surface]) :where(label) {
        display: inline-block;
    }
}

:where(:root[data-skin="mojave"] [data-mj-surface] *) {
    margin: revert-layer;
    padding: revert-layer;
    border-width: revert-layer;
    border-style: revert-layer;
}

:where(:root[data-skin="mojave"] [data-mj-surface]) :is(button, label) {
    display: revert-layer;
    position: revert-layer;
    align-items: revert-layer;
    justify-content: revert-layer;
    vertical-align: revert-layer;
    margin: revert-layer;
    padding: revert-layer;
    color: revert-layer;
    background-color: revert-layer;
    border: revert-layer;
    border-radius: revert-layer;
    text-decoration: revert-layer;
    appearance: revert-layer;
    cursor: revert-layer;
    user-select: revert-layer;
}