:root {
    --z-index-error-list: 60;
    --z-index-page-overlay: 50;
    --z-index-navigation-header: 40;
    --z-index-navigation-content: 30;
    --z-index-navigation: 20;
    --z-index-sticky-header: 10;

    --navigation-menu-width: 15em;
    --header-height: 60px;
    --dialog-max-width: 40em;

    --max-width-input: 20em;

    --spacing-xs: 0.25em;
    --spacing-sm: 0.5em;
    --spacing-md: 0.75em;
    --spacing-lg: 1em;
    --spacing-xl: 1.5em;
    --spacing-2xl: 2em;

    --font-size-base: 1em;
    --font-size-xs: 0.75em;
    --font-size-sm: 0.875em;
    --font-size-md: 1.125em;
    --font-size-lg: 1.25em;
    --font-size-xl: 1.5em;
    --font-size-2xl: 1.75em;
    --font-size-3xl: 2em;

    --border-width-content: 2px;
    --border-width-input: 2px;
    --border-width-button: 2px;
    --border-width-table: 1px;

    --border-radius-sm: 0.25em;
    --border-radius-md: 0.5em;
    --border-radius-lg: 0.75em;
    --border-radius-full: 100em;
    --border-radius-content: var(--border-radius-md);
    --border-radius-input: var(--border-radius-md);
    --border-radius-button: var(--border-radius-full);

    --shadow-content: 0 0.25em 0.5em rgb(0 0 0 / 10%);
    --shadow-navigation: 0 0 0.5em rgb(0 0 0 / 15%);

    --focus-outline-size: 3px;
    --focus-outline-offset: 1px;
    --focus-outline-offset-negative: calc(var(--focus-outline-size) * -1);

    --loading-spinner-size: 2.25em;
    --loading-spinner-thickness: 0.25em;
    --loading-spinner-animation-duration: 0.75s;

    --loading-spinner-generic-color: currentColor;
    --loading-spinner-generic-primary-opacity: 100%;
    --loading-spinner-generic-secondary-opacity: 25%;
    --loading-spinner-generic-size: 1.25em;
    --loading-spinner-generic-thickness: 0.5em;
    --loading-spinner-generic-animation-duration: 0.75s;

    --state-text-light: #e5e5e5;
    --state-text-dark: #111;

    --transition-duration: 0.2s;

    --color-file-pdf: #ca2f31;
    --color-file-docx: #295495;
    --color-file-xlsx: #016f38;
    --color-file-html: #1f5bab;
    --color-file-easm: #07ac0d;
    --color-file-edrw: #d69e2e;
    --color-file-drive3d: #324a5c;
}

:root.light {
    --color-background-faint: rgb(255 255 255 / 2.5%);
    --color-background-faint-5: rgb(255 255 255 / 5%);
    --color-background-faint-10: rgb(255 255 255 / 10%);
    --color-background-faint-25: rgb(255 255 255 / 25%);
    --color-background-faint-50: rgb(255 255 255 / 50%);
    --color-background-faint-75: rgb(255 255 255 / 75%);
    --color-background-faint-100: rgb(255 255 255 / 100%);

    --color-background-faint-contrast: rgb(0 0 0 / 2.5%);
    --color-background-faint-contrast-5: rgb(0 0 0 / 5%);
    --color-background-faint-contrast-10: rgb(0 0 0 / 10%);
    --color-background-faint-contrast-25: rgb(0 0 0 / 25%);
    --color-background-faint-contrast-50: rgb(0 0 0 / 50%);
    --color-background-faint-contrast-75: rgb(0 0 0 / 75%);
    --color-background-faint-contrast-100: rgb(0 0 0 / 100%);

    --color-backdrop: rgb(0 0 0 / 25%);

    --button-filter-hover: brightness(95%);

    --radio-button-dot: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='white' %3e%3ccircle cx='8' cy='8' r='5'/%3e%3c/svg%3e");

    color-scheme: light;
}

:root.dark {
    --color-background-faint: rgb(0 0 0 / 2.5%);
    --color-background-faint-5: rgb(0 0 0 / 5%);
    --color-background-faint-10: rgb(0 0 0 / 10%);
    --color-background-faint-25: rgb(0 0 0 / 25%);
    --color-background-faint-50: rgb(0 0 0 / 50%);
    --color-background-faint-75: rgb(0 0 0 / 75%);
    --color-background-faint-100: rgb(0 0 0 / 100%);

    --color-background-faint-contrast: rgb(255 255 255 / 2.5%);
    --color-background-faint-contrast-5: rgb(255 255 255 / 5%);
    --color-background-faint-contrast-10: rgb(255 255 255 / 10%);
    --color-background-faint-contrast-25: rgb(255 255 255 / 25%);
    --color-background-faint-contrast-50: rgb(255 255 255 / 50%);
    --color-background-faint-contrast-75: rgb(255 255 255 / 75%);
    --color-background-faint-contrast-100: rgb(255 255 255 / 100%);

    --color-backdrop: rgb(0 0 0 / 50%);

    --button-filter-hover: brightness(115%);

    --radio-button-dot: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='black' %3e%3ccircle cx='8' cy='8' r='5'/%3e%3c/svg%3e");

    color-scheme: dark;
}

/* Box Sizing Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Base */
body {
    display: grid;
    grid-template-areas:
        "navigation"
        "main";
    grid-template-rows: var(--header-height) minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    margin: 0;
    background-color: var(--color-body-background);
    color: var(--color-body-text);
    font-family: "Roboto", Arial, sans-serif;
    line-height: 1.4;
}

@media screen and (min-width: 60em) {
    body {
        grid-template-areas: "navigation main";
        grid-template-rows: minmax(0, 1fr);
        grid-template-columns: var(--navigation-menu-width) auto;
    }
}

main {
    grid-area: main;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Form fields */
label,
.label {
    display: block;
    margin: 0;
    font-weight: 500;
    text-align: left;
}

input[type="text"],
input[type="password"],
input[type="number"],
select {
    width: 100%;
    padding: var(--spacing-sm);
    margin: 0;
    border: var(--border-width-input) solid var(--color-input-border);
    border-radius: var(--border-radius-input);
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    font-family: inherit;
    font-size: inherit;
    transition: border var(--transition-duration) ease;
}

input[type="radio"],
input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    min-height: var(--spacing-xl);
    min-width: var(--spacing-xl);
    padding: 0;
    margin: 0;
    border: var(--border-width-input) solid var(--color-input-border);
    border-radius: var(--border-radius-input);
    background-color: var(--color-input-background);
    user-select: none;
}

input[type="radio"] {
    border-radius: var(--border-radius-full);
}

input[type="radio"]:checked,
input[type="checkbox"]:checked {
    display: grid;
    grid-template-areas: "stack";
    border-color: var(--color-input-text);
    background-color: var(--color-input-text);
}

input[type="checkbox"]:checked::after {
    content: "";
    grid-area: stack;
    background-color: var(--color-input-background);
    clip-path: polygon(24% 43%, 14% 53%, 39% 78%, 87% 33%, 77% 23%, 39% 58%);
}

input[type="radio"]:checked::after {
    content: "";
    grid-area: stack;
    background-image: var(--radio-button-dot);
}

select {
    appearance: none;
    padding-right: var(--spacing-xl);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23777' viewBox='0 0 20 20'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.53 3.47a.75.75 0 0 0-1.06 0L6.22 6.72a.75.75 0 0 0 1.06 1.06L10 5.06l2.72 2.72a.75.75 0 1 0 1.06-1.06l-3.25-3.25Zm-4.31 9.81 3.25 3.25a.75.75 0 0 0 1.06 0l3.25-3.25a.75.75 0 1 0-1.06-1.06L10 14.94l-2.72-2.72a.75.75 0 0 0-1.06 1.06Z'/%3e%3c/svg%3e");
    background-position: right var(--spacing-xs) center;
    background-repeat: no-repeat;
    background-size: var(--spacing-lg);
}

select:focus-visible,
input:focus-visible {
    outline: var(--focus-outline-size) solid var(--color-outline-focus);
    outline-offset: var(--focus-outline-offset);
}

input:disabled,
select:disabled,
label:has(input:disabled) {
    opacity: 50%;
}

/* Buttons */
button,
.button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    min-width: 0;
    padding:
        var(--spacing-sm)
        var(--spacing-lg);
    border-width: var(--border-width-button);
    border-style: solid;
    border-color: var(--color-button-default-border);
    border-radius: var(--border-radius-button);
    background-color: var(--color-button-default-background);
    color: var(--color-button-default-text);
    font-family: inherit;
    font-size: inherit;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    line-height: 1.25;
    cursor: pointer;
    transition:
        color var(--transition-duration),
        background-color var(--transition-duration),
        border-color var(--transition-duration),
        filter var(--transition-duration);
}

button.icon-button,
.button.icon-button {
    padding: var(--spacing-sm);
}

button.icon-button svg,
.button.icon-button svg {
    font-size: var(--font-size-lg);
}

button.icon-text-button,
.button.icon-text-button {
    justify-content: start;
    padding:
        var(--spacing-sm)
        var(--spacing-lg)
        var(--spacing-sm)
        var(--spacing-md);
}

button.button-list-item,
.button.button-list-item {
    justify-content: start;
    padding:
        var(--spacing-sm)
        var(--spacing-md)
        var(--spacing-sm)
        var(--spacing-sm);
}

button:hover,
button:focus,
button.is-active,
.button:hover,
.button:focus,
.button.is-active {
    border-color: var(--color-button-default-border-hover);
    background-color: var(--color-button-default-background-hover);
    color: var(--color-button-default-text-hover);
    text-decoration: none;
}

button:focus-visible,
.button:focus-visible {
    outline: var(--focus-outline-size) solid var(--color-outline-focus);
    outline-offset: var(--focus-outline-offset);
}

button:disabled,
.button:disabled {
    opacity: 50%;
    pointer-events: none;
}

.button-primary {
    border-color: var(--color-button-primary-border);
    background-color: var(--color-button-primary-background);
    color: var(--color-button-primary-text);
}

.button-primary:hover,
.button-primary:focus,
.button-primary.is-active {
    border-color: var(--color-button-primary-border-hover);
    background-color: var(--color-button-primary-background-hover);
    color: var(--color-button-primary-text-hover);
}

.button-secondary {
    border-color: var(--color-button-secondary-border);
    background-color: var(--color-button-secondary-background);
    color: var(--color-button-secondary-text);
}

.button-secondary:hover,
.button-secondary:focus,
.button-secondary.is-active {
    border-color: var(--color-button-secondary-border-hover);
    background-color: var(--color-button-secondary-background-hover);
    color: var(--color-button-secondary-text-hover);
}

.button-tertiary {
    border-color: var(--color-button-tertiary-border-hover);
    background-color: var(--color-button-tertiary-background);
    color: var(--color-button-tertiary-text);
}

.button-tertiary:hover,
.button-tertiary:focus,
.button-tertiary.is-active {
    background-color: var(--color-button-tertiary-border-hover);
    background-color: var(--color-button-tertiary-background-hover);
    color: var(--color-button-tertiary-text);
}

.button-ghost {
    border-color: var(--color-button-ghost-border);
    background-color: var(--color-button-ghost-background);
    color: var(--color-button-ghost-text);
}

.button-ghost:hover,
.button-ghost:focus,
.button-ghost.is-active {
    border-color: var(--color-button-ghost-border-hover);
    background-color: var(--color-button-ghost-background-hover);
    color: var(--color-button-ghost-text-hover);
}

.button-confirm,
.button-confirm:hover,
.button-confirm:focus,
.button-confirm:focus-visible {
    background-color: var(--color-state-success-background);
    color: var(--color-state-success-text);
}

.button-confirm-faint,
.button-confirm-faint:hover,
.button-confirm-faint:focus,
.button-confirm-faint:focus-visible {
    background-color: var(--color-state-success-background-faint);
    color: var(--color-state-success-text-faint);
}

.button-warning,
.button-warning:hover,
.button-warning:focus,
.button-warning:focus-visible {
    background-color: var(--color-state-warning-background);
    color: var(--color-state-warning-text);
}

.button-warning-faint,
.button-warning-faint:hover,
.button-warning-faint:focus,
.button-warning-faint:focus-visible {
    background-color: var(--color-state-warning-background-faint);
    color: var(--color-state-warning-text-faint);
}

.button-danger,
.button-danger:hover,
.button-danger:focus,
.button-danger:focus-visible {
    background-color: var(--color-state-danger-background);
    color: var(--color-state-danger-text);
}

.button-danger-faint,
.button-danger-faint:hover,
.button-danger-faint:focus,
.button-danger-faint:focus-visible {
    background-color: var(--color-state-danger-background-faint);
    color: var(--color-state-danger-text-faint);
}

.button-info,
.button-info:hover,
.button-info:focus,
.button-info:focus-visible {
    background-color: var(--color-state-information-background);
    color: var(--color-state-information-text);
}

.button-info-faint,
.button-info-faint:hover,
.button-info-faint:focus,
.button-info-faint:focus-visible {
    background-color: var(--color-state-information-background-faint);
    color: var(--color-state-information-text-faint);
}

.button-confirm:hover,
.button-confirm-faint:hover,
.button-warning:hover,
.button-warning-faint:hover,
.button-danger:hover,
.button-danger-faint:hover,
.button-info:hover,
.button-info-faint:hover {
    filter: var(--button-filter-hover);
}

.button-operation {
    border-color: var(--color-button-operation-border);
    background-color: var(--color-button-operation-background);
    color: var(--color-button-operation-text);
}

.button-operation:hover,
.button-operation:focus,
.button-operation.is-active {
    border-color: var(--color-button-operation-border-hover);
    background-color: var(--color-button-operation-background-hover);
    color: var(--color-button-operation-text-hover);
}

.button-transition {
    border-color: var(--color-button-transition-border);
    background-color: var(--color-button-transition-background);
    color: var(--color-button-transition-text);
}

.button-transition:hover,
.button-transition:focus,
.button-transition.is-active {
    border-color: var(--color-button-transition-border-hover);
    background-color: var(--color-button-transition-background-hover);
    color: var(--color-button-transition-text-hover);
}

.loading-button {
    display: grid;
    grid-template-areas: "stack";
    place-items: center;
}

.loading-button.is-loading {
    opacity: 50%;
    pointer-events: none;
}

.loading-button > * {
    grid-area: stack;
}

.loading-button.is-loading .text {
    visibility: hidden;
}

.loading-button:not(.is-loading) .icon {
    display: none;
}

/* Typography */
h1,
h2,
h3,
h4,
h5 {
    margin: 0;
    font-weight: 500;
}

h1 {
    font-size: var(--font-size-2xl);
}

h2 {
    font-size: var(--font-size-xl);
}

h3 {
    font-size: var(--font-size-lg);
}

h4 {
    font-size: var(--font-size-md);
}

h5 {
    font-size: var(--font-size-base);
}

p {
    margin: 0;
    line-height: 1.5;
}

hr {
    margin: 0;
    border: none;
    border-top: var(--spacing-xs) solid var(--color-input-border);
}

a {
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 0.125em;
}

a:hover {
    color: var(--color-link-hover);
    text-decoration: none;
}

a:focus-visible {
    outline: var(--focus-outline-size) solid var(--color-outline-focus);
    outline-offset: var(--focus-outline-offset);
}

.page-title {
    padding: var(--spacing-lg) var(--spacing-lg) 0 var(--spacing-lg);
}

.page-title h1 {
    margin-bottom: var(--spacing-sm);
}

/* Component placeholders */
dw-live-color-scheme-selector:not(:defined) {
    width: 1em;
    height: 1em;
    font-size: 2.25rem;
}

dw-live-navigation-menu:not(:defined) {
    background-color: var(--color-navigation-background);
    box-shadow: var(--shadow-content);
}

dw-live-error-list {
    z-index: var(--z-index-error-list);
}

/* Grid view */
.grid-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-view-min-width), 100%), var(--grid-view-max-width)));
    gap: var(--spacing-lg);
    padding: 0 var(--spacing-lg) var(--spacing-lg);
}

.grid-view .no-content-message {
    grid-column: 1 / -1;
}

.grid-card {
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-content);
    border-radius: var(--border-radius-content);
    background-color: var(--color-content-background);
    color: var(--color-body-text);
    text-decoration: none;
    cursor: pointer;
    outline: var(--focus-outline-size) solid transparent;
    transition: outline var(--transition-duration) ease;
}

.grid-card button {
    transition: background-color ease var(--transition-duration);
}

.grid-card:hover {
    color: var(--color-body-text);
    outline-color: var(--color-outline-hover);
}

.grid-card:focus {
    outline-color: var(--color-outline-focus);
}

.grid-card:hover button {
    border-color: var(--color-button-primary-border-hover);
    background-color: var(--color-button-primary-background-hover);
    color: var(--color-button-primary-text-hover);
}

/* Loading spinner */
.loading-state {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
}

.loading-state .loading-text {
    font-size: var(--font-size-lg);
    font-weight: 500;
    color: var(--color-loading-text);
}

/* Loading skeleton */
.skeleton-card {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-content);
    background-color: var(--color-content-background);
    overflow: hidden;
    opacity: 100%;
}

.skeleton-card .skeleton-image,
.skeleton-card .skeleton-icon,
.skeleton-card .skeleton-title,
.skeleton-card .skeleton-description,
.skeleton-card .skeleton-button {
    position: relative;
    background-color: var(--color-body-background);
    border-radius: var(--border-radius-content);
}

.skeleton-card .skeleton-image {
    aspect-ratio: 1 / 1;
}

.skeleton-card .skeleton-icon {
    width: 1em;
    height: 1em;
}

.skeleton-card .skeleton-title {
    height: 1.5em;
    width: 80%;
}

.skeleton-card .skeleton-description {
    height: 1em;
    width: 60%;
}

.skeleton-card .skeleton-button {
    height: 2.5em;
    border-radius: var(--border-radius-button);
}

.skeleton-card .skeleton-image::after,
.skeleton-card .skeleton-icon::after,
.skeleton-card .skeleton-title::after,
.skeleton-card .skeleton-description::after,
.skeleton-card .skeleton-button::after {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    right: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--color-content-background) 50%,
        transparent 75%);
    animation: loading-skeleton 2s infinite linear;
}

.skeleton-card:nth-child(2) {
    opacity: 75%;
}

.skeleton-card:nth-child(3) {
    opacity: 50%;
}

.skeleton-card:nth-child(4) {
    opacity: 25%;
}

/* Page Notification */
.notification-container {
    position: fixed;
    z-index: var(--z-index-sticky-header);
    top: 100%;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0 var(--spacing-sm);
}

.page-notification {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-state-danger-background);
    color: var(--color-state-danger-text);
    border-radius: var(--spacing-sm) var(--spacing-sm) 0 0;
    transform: translateY(-100%);
}

.page-notification .notification-content {
    display: inline-block;
    padding: 0 var(--spacing-sm);
    line-height: 1.2;
}

.page-notification .notification-close {
    display: block;
    padding: var(--spacing-sm) var(--spacing-lg);
    margin-left: var(--spacing-md);
    transition: background-color .25s ease;
}

@media screen and (min-width: 40em) {
    .page-title {
        padding: var(--spacing-2xl) var(--spacing-2xl) 0 var(--spacing-2xl);
    }

    .page-title h1 {
        margin-bottom: var(--spacing-lg);
    }

    .grid-view {
        padding: 0 var(--spacing-2xl) var(--spacing-2xl);
    }
}

@media screen and (min-width: 60em) {
    .notification-container {
        top: auto;
        bottom: 100%;
    }

    .page-notification {
        border-radius: 0 0 var(--spacing-sm) var(--spacing-sm);
        transform: translateY(100%);
    }
}

.skeleton-block {
    position: relative;
    overflow: hidden;
    background-color: var(--color-content-background);
    border-radius: var(--border-radius-content);
    height: 10em;
}

.skeleton-block::after {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    right: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--color-content-border) 50%,
        transparent 75%);
    animation: loading-skeleton 2s infinite linear;
}

/* No Content Message */
.no-content-message {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 10em;
    padding: var(--spacing-lg);
    background-color: var(--color-content-background);
    border-radius: var(--border-radius-content);
    text-align: center;
}

/* State Tags */
.state-tag {
    display: inline-flex;
    line-height: 1.3;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    background-color: var(--color-specification-state-default-background);
    color: var(--color-specification-state-default-text);
}

.state-tag.state-save,
.state-tag.state-saved {
    background-color: var(--color-specification-state-saved-background);
    color: var(--color-specification-state-saved-text);
}

.state-tag.state-pending {
    background-color: var(--color-specification-state-pending-background);
    color: var(--color-specification-state-pending-text);
}

.state-tag.state-complete,
.state-tag.state-completed {
    background-color: var(--color-specification-state-completed-background);
    color: var(--color-specification-state-completed-text);
}

.state-tag.state-release,
.state-tag.state-released,
.state-tag.state-release-to-autopilot,
.state-tag.state-released-to-autopilot,
.state-tag.state-release-to-server,
.state-tag.state-released-to-server {
    background-color: var(--color-specification-state-released-background);
    color: var(--color-specification-state-released-text);
}

/* Notifications */
.notification {
    padding:
        var(--spacing-md)
        var(--spacing-lg);
    background-color: var(--color-state-information-background);
    color: var(--color-state-information-text);
    border-radius: var(--border-radius-content);
}

.notification.danger {
    background-color: var(--color-state-danger-background);
    color: var(--color-state-danger-text);
}

.notification.success {
    background-color: var(--color-state-success-background);
    color: var(--color-state-success-text);
}

/* Dialog */
.dialog {
    padding: 0;
    border: none;
    border-radius: var(--border-radius-content);
    box-shadow: var(--shadow-content);
}

.dialog::backdrop {
    background-color: var(--color-backdrop);
}

.dialog .dialog-content {
    max-width: var(--dialog-max-width);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    margin: 0;
    box-shadow: var(--shadow-content);
    border-radius: var(--border-radius-content);
    background-color: var(--color-content-background);
    color: var(--color-body-text);
}

.dialog .dialog-text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.dialog .dialog-title {
    margin: 0;
}

.dialog .dialog-message {
    font-size: var(--font-size-md);
}

.dialog .dialog-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.dialog .dialog-actions button,
.dialog .dialog-actions .button {
    min-width: 5em;
}

@media (min-width: 40em) {
    .dialog .dialog-content {
        padding: var(--spacing-xl);
        gap: var(--spacing-lg);
    }

    .dialog .dialog-actions {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: start;
    }
}

/* Utilities */
.hidden,
[hidden] {
    display: none !important;
}

[data-local-text],
[data-hidden-content] {
    visibility: hidden;
}

svg.icon {
    display: block;
    width: 1em;
    min-width: 1em;
    height: 1em;
    fill: currentColor;
}

/* Animations */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
    }
}

@keyframes loading-skeleton {
    0% {
        opacity: 10%;
        left: -50%;
    }

    50% {
        opacity: 100%;
        left: 50%;
    }

    100% {
        opacity: 10%;
        left: 150%;
    }
}

@keyframes fade-in {
    0% {
       opacity: 0;
    }
    100% {
       opacity: 100%;
    }
}

@keyframes fade-up {
    0% {
        opacity: 0;
        transform: translateY(5px);
    }
    100% {
        opacity: 100%;
        transform: translateY(0);
    }
}

@keyframes fade-loop {
    0% {
        background: var(--color-loading-spinner-secondary);
    }
    50% {
        background: var(--color-loading-spinner-secondary);
    }
}