/* Generated by makeover-webview from makeover-layout. Do not edit.
   Depth is a fill and an edge together; naming them apart is what let
   them disagree. See the crate's README and wiki note makeover-layout.

   Everything below is in the `makeover` cascade layer. Declare the
   order once in your own stylesheet, or this layer's position is decided
   by whichever generated file the browser happens to see first:

   @layer makeover, base, components, responsive; */
@layer makeover {
    :root {
        --bevel-raised: inset 1px 1px 0 var(--bevel-light), inset -1px -1px 0 var(--bevel-dark);
        --bevel-inset: inset 1px 1px 0 var(--bevel-dark), inset -1px -1px 0 var(--bevel-light);
    }

    .raised {
        background: var(--surface-raised);
        box-shadow: var(--bevel-raised);
    }
    .well {
        background: var(--surface-well, var(--surface-page));
        box-shadow: var(--bevel-inset);
    }
    @media (hover: hover) and (pointer: fine) {
        .raised:hover {
            background: var(--hover-surface);
        }
    }
    .raised:active {
        background: var(--surface-well, var(--surface-page));
        box-shadow: var(--bevel-inset);
    }
    .raised:focus-visible {
        outline: 2px solid var(--focus-ring);
        outline-offset: 2px;
    }
    .raised:disabled,
    .raised[aria-disabled="true"] {
        background: var(--surface-raised);
        box-shadow: var(--bevel-raised);
        color: var(--content-muted);
        cursor: not-allowed;
    }

    .button {
        background: var(--surface-raised);
        box-shadow: var(--bevel-raised);
    }
    @media (hover: hover) and (pointer: fine) {
        .button:hover {
            background: var(--hover-surface);
        }
    }
    .button:active {
        background: var(--surface-well, var(--surface-page));
        box-shadow: var(--bevel-inset);
    }
    .button:focus-visible {
        outline: 2px solid var(--focus-ring);
        outline-offset: 2px;
    }
    .button:disabled,
    .button[aria-disabled="true"] {
        background: var(--surface-raised);
        box-shadow: var(--bevel-raised);
        color: var(--content-muted);
        cursor: not-allowed;
    }
    .card {
        background: var(--surface-raised);
        box-shadow: var(--bevel-raised);
    }
    @media (hover: hover) and (pointer: fine) {
        .card:hover {
            background: var(--hover-surface);
        }
    }
    .card:active {
        background: var(--surface-well, var(--surface-page));
        box-shadow: var(--bevel-inset);
    }
    .card:focus-visible {
        outline: 2px solid var(--focus-ring);
        outline-offset: 2px;
    }
    .card:disabled,
    .card[aria-disabled="true"] {
        background: var(--surface-raised);
        box-shadow: var(--bevel-raised);
        color: var(--content-muted);
        cursor: not-allowed;
    }
    .field {
        background: var(--surface-well, var(--surface-page));
        box-shadow: var(--bevel-inset);
    }
    .field:focus-visible {
        outline: 2px solid var(--focus-ring);
        outline-offset: calc(-1 * 2px);
    }
    .field:disabled,
    .field[aria-disabled="true"] {
        background: var(--surface-well, var(--surface-page));
        box-shadow: var(--bevel-inset);
        color: var(--content-muted);
        cursor: not-allowed;
    }
    .field[aria-invalid="true"] {
        box-shadow: var(--bevel-inset), 0 0 0 1px var(--danger);
    }
    .badge {
        color: var(--content-muted);
    }
    .badge[data-tone="info"] {
        color: var(--info);
    }
    .badge[data-tone="success"] {
        color: var(--success);
    }
    .badge[data-tone="warning"] {
        color: var(--warning);
    }
    .badge[data-tone="danger"] {
        color: var(--danger);
    }
    .chip {
        background: var(--surface-raised);
        box-shadow: var(--bevel-raised);
    }
    @media (hover: hover) and (pointer: fine) {
        .chip:hover {
            background: var(--hover-surface);
        }
    }
    .chip:active {
        background: var(--surface-well, var(--surface-page));
        box-shadow: var(--bevel-inset);
    }
    .chip:focus-visible {
        outline: 2px solid var(--focus-ring);
        outline-offset: 2px;
    }
    .chip:disabled,
    .chip[aria-disabled="true"] {
        background: var(--surface-raised);
        box-shadow: var(--bevel-raised);
        color: var(--content-muted);
        cursor: not-allowed;
    }
    .chip.latched {
        background: var(--surface-well, var(--surface-page));
        box-shadow: var(--bevel-inset);
    }
    .tab {
        background: var(--surface-sunken);
    }
    @media (hover: hover) and (pointer: fine) {
        .tab:hover {
            background: var(--hover-surface);
        }
    }
    .tab:active {
        background: var(--surface-well, var(--surface-page));
        box-shadow: var(--bevel-inset);
    }
    .tab:focus-visible {
        outline: 2px solid var(--focus-ring);
        outline-offset: 2px;
    }
    .tab:disabled,
    .tab[aria-disabled="true"] {
        background: var(--surface-sunken);
        color: var(--content-muted);
        cursor: not-allowed;
    }
    .tab.chosen {
        background: var(--surface-raised);
        box-shadow: var(--bevel-raised);
    }
    .segment {
        background: var(--surface-raised);
        box-shadow: var(--bevel-raised);
    }
    @media (hover: hover) and (pointer: fine) {
        .segment:hover {
            background: var(--hover-surface);
        }
    }
    .segment:active {
        background: var(--surface-well, var(--surface-page));
        box-shadow: var(--bevel-inset);
    }
    .segment:focus-visible {
        outline: 2px solid var(--focus-ring);
        outline-offset: 2px;
    }
    .segment:disabled,
    .segment[aria-disabled="true"] {
        background: var(--surface-raised);
        box-shadow: var(--bevel-raised);
        color: var(--content-muted);
        cursor: not-allowed;
    }
    .segment.chosen {
        background: var(--surface-well, var(--surface-page));
        box-shadow: var(--bevel-inset);
    }
    .toggle {
        background: var(--surface-raised);
        box-shadow: var(--bevel-raised);
    }
    @media (hover: hover) and (pointer: fine) {
        .toggle:hover {
            background: var(--hover-surface);
        }
    }
    .toggle:active {
        background: var(--surface-well, var(--surface-page));
        box-shadow: var(--bevel-inset);
    }
    .toggle:focus-visible {
        outline: 2px solid var(--focus-ring);
        outline-offset: 2px;
    }
    .toggle:disabled,
    .toggle[aria-disabled="true"] {
        background: var(--surface-raised);
        box-shadow: var(--bevel-raised);
        color: var(--content-muted);
        cursor: not-allowed;
    }
    .toggle.chosen {
        background: var(--surface-well, var(--surface-page));
        box-shadow: var(--bevel-inset);
    }
    .row-primary {
        color: var(--content);
    }
    .row-secondary {
        color: var(--content-secondary);
    }
    .row-meta {
        color: var(--content-muted);
    }
    @media (hover: hover) and (pointer: fine) {
        .row-actions {
            opacity: 0;
            pointer-events: none;
        }
    }
    @media (hover: hover) and (pointer: fine) {
        .row:hover .row-actions {
            opacity: 1;
            pointer-events: auto;
        }
    }
    .row:focus-within .row-actions {
        opacity: 1;
        pointer-events: auto;
    }
    .progress {
        background: var(--surface-well, var(--surface-page));
        box-shadow: var(--bevel-inset);
    }
    .progress > .progress-fill {
        background: var(--action);
    }
    .progress > .progress-fill[data-tone="info"] {
        background: var(--info);
    }
    .progress > .progress-fill[data-tone="success"] {
        background: var(--success);
    }
    .progress > .progress-fill[data-tone="warning"] {
        background: var(--warning);
    }
    .progress > .progress-fill[data-tone="danger"] {
        background: var(--danger);
    }
}