:root {
    --brick-font-heading: var(--brick-font-family-serif);
    /*--brick-font-family-sans-serif: var(--brick-font-classical-humanist);*/

    --brick-color-primary-light-0: hsl(var(--brick-color-palette-teal-0));
    --brick-color-primary-light-1: hsl(var(--brick-color-palette-teal-1));
    --brick-color-primary-light-2: hsl(var(--brick-color-palette-teal-2));
    --brick-color-primary-light-3: hsl(var(--brick-color-palette-teal-3));
    --brick-color-primary-mid-1: hsl(var(--brick-color-palette-teal-7));
    --brick-color-primary-mid-2: hsl(var(--brick-color-palette-teal-8));
    --brick-color-primary-mid-3: hsl(var(--brick-color-palette-teal-9));
    --brick-color-primary-dark-3: hsl(var(--brick-color-palette-teal-10));
    --brick-color-primary-dark-2: hsl(var(--brick-color-palette-teal-11));
    --brick-color-primary-dark-1: hsl(var(--brick-color-palette-teal-12));
    --brick-color-primary-dark-0: hsl(var(--brick-color-palette-teal-13));

/*
    --brick-color-secondary-light-0: hsl(var(--brick-color-palette-purple-0));
    --brick-color-secondary-light-1: hsl(var(--brick-color-palette-purple-1));
    --brick-color-secondary-light-2: hsl(var(--brick-color-palette-purple-2));
    --brick-color-secondary-light-3: hsl(var(--brick-color-palette-purple-3));
    --brick-color-secondary-mid-1: hsl(var(--brick-color-palette-purple-7));
    --brick-color-secondary-mid-2: hsl(var(--brick-color-palette-purple-8));
    --brick-color-secondary-mid-3: hsl(var(--brick-color-palette-purple-9));
    --brick-color-secondary-dark-3: hsl(var(--brick-color-palette-purple-10));
    --brick-color-secondary-dark-2: hsl(var(--brick-color-palette-purple-11));
    --brick-color-secondary-dark-1: hsl(var(--brick-color-palette-purple-12));
    --brick-color-secondary-dark-0: hsl(var(--brick-color-palette-purple-13));
    --brick-card-background-color: var(--brick-color-primary-accent);
    --brick-card-content-color: var(--brick-color-content-contrast);
    --brick-card-content-color-alt: var(--brick-color-content-contrast-active);
*/
--brick-border-rounding: var(--brick-border-rounding-none);


}

.danger {
    background-color: var(--brick-color-danger-surface);
}

/*.card {
    border-bottom: .25em solid var(--brick-color-primary-content-3);
}*/

body {
    scrollbar-gutter: stable;
}

[data-border] {
    border-color: currentColor;
}

.no-margin {
    margin-inline: 0;
    margin-block: 0;
}

[data-layout~="stretch"] {
    justify-content: stretch;
}

.has-space {
    margin-inline: var(--brick-size-rel-md-lg);
    margin-block: var(--brick-size-rel-md);
}

.grow {
    flex-grow: 1;
}

.flush,
[data-layout] > form {
    margin: 0;
    padding: 0;
}

.inline-container > *,
label.inline > *,
.inline {
    width: auto;
    display: inline-flex;
}

.flex1 {
    flex: 1;
}

.no-shrink {
    flex-shrink: 0;
}

body {
  scrollbar-gutter: stable both-edges;
}

/* p::not(:has(*)),
p:empty {
    display: none;
} */

up-popup, up-cover-box, up-drawer-box, up-modal-box {
    background-color: var(--brick-color-background) !important;
}


up-popup-dismiss, up-cover-dismiss, up-drawer-dismiss, up-modal-dismiss {
    border-radius: var(--brick-border-rounding-full);
    background: transparent;
    padding: .5em;
    border: transparent;
    min-width: fit-content;

    &, &:hover, &:focus, &:active {
        min-width: none;
        border-radius: var(--brick-border-rounding-full);
        /*color: var(--brick-color-content);*/
        background: transparent;
    }
}

.selector-button {
    min-width: auto;
    padding-inline: var(--brick-size-rel-xs);
    padding-block: var(--brick-size-rel-xs);
}