/* Copyright ExaOps Pty Ltd 2026. All rights reserved. */

/* Accents shared by more than one component.
   =========================================

   `exa-hover-success` turns a control green under the pointer. It is on the two controls that
   open the whole application rather than a part of it — the launcher waffle in the app bar, and
   the "Other tools" button a customer presses to switch the rest of the platform on — so the
   green means the same thing in both places, which is the only reason to use a colour at all.

   One rule rather than a copy in each component. The two are in different projects (SharedUI and
   Marketly) and would have drifted to two greens.

   `fill` as well as `color`: a MudBlazor icon is an inline SVG whose paths inherit `fill`, so
   setting colour alone changes the label and leaves the icon as it was. That is measurable and
   was measured — the first version of this did exactly that. */

.exa-hover-success .mud-icon-root,
.exa-hover-success.mud-button-root .mud-icon-root {
    transition: fill .12s, color .12s;
}

.exa-hover-success:hover .mud-icon-root,
.exa-hover-success:focus-visible .mud-icon-root,
.exa-hover-success .mud-icon-button:hover .mud-icon-root,
.exa-hover-success .mud-icon-button:focus-visible .mud-icon-root {
    fill: var(--mud-palette-success);
    color: var(--mud-palette-success);
}

/* A button carries a label and a border as well as its icon, and all three should move together
   or the hover reads as a rendering fault. */
.exa-hover-success.mud-button-root:hover,
.exa-hover-success.mud-button-root:focus-visible {
    color: var(--mud-palette-success);
    border-color: var(--mud-palette-success);
    background-color: var(--mud-palette-success-hover);
}