[data-theme=light],
:root:not([data-theme=dark]),
:host(:not([data-theme=dark])) {

    --pico-color: var(--text-color);
    --pico-background-color: var(--background-color);
    --pico-text-selection-color: var(--text-selection-color);

    --pico-primary: var(--primary-color);
    --pico-primary-background: var(--primary-color);
    --pico-primary-inverse: var(--primary-text-color);
    --pico-primary-hover: var(--primary-text-hover-color);
    --pico-primary-hover-background: var(--primary-hover-color);
    --pico-primary-hover-underline: var(--primary-text-hover-color);
    --pico-primary-focus: var(--primary-hover-color);

    --pico-secondary: var(--secondary-color);
    --pico-secondary-background: var(--secondary-color);
    --pico-secondary-inverse: var(--secondary-text-color);
    --pico-secondary-hover: var(--secondary-hover-color);
    --pico-secondary-hover-background: var(--secondary-hover-color);
    --pico-secondary-hover-underline: var(--secondary-text-hover-color);

    --pico-contrast: var(--contrast-color);
    --pico-contrast-background: var(--contrast-color);
    --pico-contrast-inverse: var(--contrast-text-color);
    --pico-contrast-hover: var(--contrast-hover-color);
    --pico-contrast-hover-background: var(--contrast-hover-color);
    --pico-contrast-hover-underline: var(--contrast-text-hover-color);

    --pico-table-border-color: var(--primary-color);
    --pico-table-row-stripped-background-color: var(--table-stripped-row-background);

    --pico-font-family: var(--font-family);
    --pico-font-size: var(--font-size-base);

    --spacing-xs: 4px;
    --spacing-md: 8px;
    --spacing-lg: 10px;

    --radius-xs: 4px;
}

main > article {
    padding-left: var(--pico-spacing) !important;
    padding-right: var(--pico-spacing) !important;
}

/*region utility classes*/
.center {
    text-align: center;
}

.monospaced {
    font-family: monospace;
}

.nowrap {
    white-space: nowrap;
}

.disabled {
    opacity: var(--pico-form-element-disabled-opacity);
}

article.error-box {
    margin-top: calc(2 * var(--pico-spacing));
}

.wo-underline {
    text-decoration: none;
}
/*endregion*/

/*region nav*/
nav {
    padding-left: var(--pico-spacing);
    padding-right: var(--pico-spacing);
    background-color: var(--primary-color)
}

nav li {
    color: var(--pico-primary-inverse);
}

nav a {
    color: var(--pico-primary-inverse);
}

nav a:hover {
    color: var(--primary-nav-text-hover-color);
    transition: background-color 0ms, color 0ms, text-decoration 0ms, box-shadow 0ms, -webkit-text-decoration 0ms;
}
/*endregion*/

/*region tables*/
td > form > button {
    width: auto !important;
}

th {
    color: var(--pico-primary-inverse);
    background: var(--pico-primary-background);
}

table.sticky {
    border-collapse: separate;
}

table.sticky th,
table.sticky td {
    white-space: nowrap;
}

td.sticky,
th.sticky {
    z-index: 1;
    position: sticky;
    left: 0;
    border-right: var(--pico-border-width) solid var(--primary-color);
}
/*endregion*/

/*region forms*/
fieldset.bordered {
    border: var(--pico-border-width) solid var(--primary-color);
    border-radius: var(--pico-border-radius);
    padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
}

fieldset.bordered > legend {
    color: var(--pico-primary-inverse);
    border: var(--pico-border-width) solid var(--primary-color);
    border-radius: var(--pico-border-radius);
    padding: var(--pico-outline-width) var(--pico-spacing);
    font-weight: bold;
    background: var(--pico-primary);
}
/*endregion*/

/*region alerts*/
.navbar-top {
    position: relative;
}

.alerts {
    position: absolute;
    right: 0;
    box-sizing: border-box;
}

.alert {
    margin: var(--pico-spacing);
    padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
    border-radius: var(--pico-border-radius);
    color: var(--color);
    background-color: var(--background-color);
    border: var(--pico-border-width) solid var(--color);
    width: 30rem;
    transition: 0.3s;
    transition-behavior: allow-discrete;
    transform: scaleY(1);
    transform-origin: top;
    opacity: 1;
}

.alert.closed {
    display: none;
    transform: scaleY(0);
    opacity: 0;
}

.alert h5 {
    display: inline-block;
    background-image: var(--icon);
    padding-left: calc(var(--pico-font-size) * var(--pico-line-height) + var(--pico-form-element-spacing-horizontal));
    background-position: center left;
    background-size: var(--pico-line-height);
    color: var(--color);
}

.alert p {
    color: var(--color);
    margin-bottom: 0;
}

.alert a {
    display: inline-block;
    color: var(--color);
    font-weight: bold;
    text-decoration: none;
    float: right;
    cursor: pointer;
}

.alert-error {
    --background-color: #ffebee;
    --icon: var(--pico-icon-invalid);
    --color: var(--pico-del-color);
}

.alert-success {
    --background-color: #e8f5e9;
    --icon: var(--pico-icon-valid);
    --color: var(--pico-ins-color);
}

input[type=checkbox]:checked + .close-on-check {
    display: none;
}
/*endregion*/

/*region pagination*/
.pagination {
    margin-top: var(--spacing-4xl);
    text-align: center;
    padding: var(--spacing-4xl);
    --pagination-link-border: var(--pico-border-width) solid var(--pico-form-element-border-color);
}

.pagination a {
    padding: var(--spacing-md) var(--spacing-lg);
    margin: 0 var(--spacing-xs);
    border: var(--pagination-link-border);
    text-decoration: none;
    color: #333;
    border-radius: var(--pico-border-radius);
    transition: var(--transition-all);
}

.pagination a:hover {
    background-color: var(--pico-primary-hover-background);
    border-color: var(--pico-primary-hover-background);
}

.pagination a.active {
    color: var(--primary-text-color);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.pagination a.disabled:hover {
    border: var(--pagination-link-border);
}
/*endregion*/