/* 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. */
: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);
}
.raised:hover {
    background: var(--hover-surface);
}
.raised:active {
    background: var(--surface-well, var(--surface-page));
    box-shadow: var(--bevel-inset);
}

.button {
    background: var(--surface-raised);
    box-shadow: var(--bevel-raised);
}
.button:hover {
    background: var(--hover-surface);
}
.button:active {
    background: var(--surface-well, var(--surface-page));
    box-shadow: var(--bevel-inset);
}
.card {
    background: var(--surface-raised);
    box-shadow: var(--bevel-raised);
}
.card:hover {
    background: var(--hover-surface);
}
.card:active {
    background: var(--surface-well, var(--surface-page));
    box-shadow: var(--bevel-inset);
}
.field {
    background: var(--surface-well, var(--surface-page));
    box-shadow: var(--bevel-inset);
}
.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);
}
.chip:hover {
    background: var(--hover-surface);
}
.chip:active {
    background: var(--surface-well, var(--surface-page));
    box-shadow: var(--bevel-inset);
}
.chip.latched {
    background: var(--surface-well, var(--surface-page));
    box-shadow: var(--bevel-inset);
}
.tab {
    background: var(--surface-sunken);
}
.tab:hover {
    background: var(--hover-surface);
}
.tab:active {
    background: var(--surface-well, var(--surface-page));
    box-shadow: var(--bevel-inset);
}
.tab.chosen {
    background: var(--surface-raised);
    box-shadow: var(--bevel-raised);
}
.segment {
    background: var(--surface-raised);
    box-shadow: var(--bevel-raised);
}
.segment:hover {
    background: var(--hover-surface);
}
.segment:active {
    background: var(--surface-well, var(--surface-page));
    box-shadow: var(--bevel-inset);
}
.segment.chosen {
    background: var(--surface-well, var(--surface-page));
    box-shadow: var(--bevel-inset);
}
.toggle {
    background: var(--surface-raised);
    box-shadow: var(--bevel-raised);
}
.toggle:hover {
    background: var(--hover-surface);
}
.toggle:active {
    background: var(--surface-well, var(--surface-page));
    box-shadow: var(--bevel-inset);
}
.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);
}
.row-actions {
    opacity: 0;
    pointer-events: none;
}
.row:hover .row-actions,
.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);
}