button,
[type="button"],
[type="submit"],
[type="reset"],
a.btn {
    display: inline-block;
    background-color: var(--primary);
    border: var(--border-width) solid var(--primary);
    border-radius: var(--border-radius);
    padding: var(--space-sm) var(--space-md);
    text-decoration: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition:
        color 150ms ease-in-out,
        transform 150ms ease;

    &.important {
        font-weight: bold;
        display: flex;

        & > svg {
            margin: 0 5pt;
        }
    }

    /* Hover effect */
    &:hover {
        color: color-mix(in lab, var(--primary), var(--white) 90%);
        border: var(--border-width) solid var(--primary);
        cursor: pointer;
    }
}

.btn-alt {
    background-color: color-mix(in lab, var(--primary), var(--white) 90%);
}

.btn-alt:hover {
    color: color-mix(in lab, var(--primary), var(--black) 30%);
}

.btn-link,
.btn-link:hover {
    border: none;
    display: inline;
    padding: 0;
    background-color: inherit;
    color: var(--link);
    text-decoration: underline;
}

.btn-sm {
    max-width: fit-content;
    padding: var(--space-xs) var(--space-sm);
}

highlight-actions {
    display: flex;
    justify-content: start;
    margin-bottom: var(--space-md);

    & > * {
        margin: var(--space-sm) var(--space-sm) var(--space-sm) 0;
    }
}

main a,
main a:visited {
    color: var(--link);
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"] {
    padding: var(--space-sm);
    border: var(--border-width) solid var(--grey);
    border-radius: var(--border-radius);
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="number"]:hover,
input[type="password"]:hover {
    border: var(--border-width) solid var(--primary);
}

input[type="text"].error,
input[type="email"].error,
input[type="number"].error,
input[type="password"].error {
    border: var(--border-width) solid var(--error);
    background-color: var(--white);
}

#accept-terms + span {
    font-weight: normal;
}

h1 {
  font-size: 2.25rem;
}

h2 {
    margin-bottom: var(--space-sm);
}

h3 {
    color: var(--primary);
}

section > p {
    margin-bottom: var(--space-sm);
}

.contained {
    max-width: 80ch;
}

code,
code-block {
    font-family: monospace;
    white-space: pre;
    background-color: var(--white);
}

code {
    padding: var(--space-xxs) var(--space-xs);
}

code-block {
    white-space: pre;
    display: block;
    width: 100%;
    margin: var(--space-sm) 0;
    padding: var(--space-xs) var(--space-xs);
}

.key {
    display: block;
    border-radius: var(--border-radius);
    padding: var(--space-sm) var(--space-sm);
    margin: var(--space-sm) 0;
    width: fit-content;
}

.card {
    background-color: var(--white);
    border-radius: var(--border-radius);
    padding: calc((var(--space-md) + var(--space-sm)) / 2) var(--space-md) var(--space-sm) var(--space-md);
}

.card-action {
    margin-top: var(--space-sm);
}

dl {
    margin-bottom: var(--space-sm);
}

dd {
    font-weight: var(--bold);
    margin-top: var(--space-sm);
}

dt {
    padding-left: var(--space-sm);

    input[type="text"],
    input[type="number"],
    input[type="password"] {
        margin-top: var(--space-xs);
    }

    input[type="number"] {
        max-width: var(--space-xl);
    }
}

details.confirmation-btn {
    width: 200px;
    padding: var(--space-sm) 0;

    summary {
        color: var(--primary);
        cursor: pointer;
        text-decoration: underline;
        user-select: none;
    }

    summary::marker {
        content: "Delete";
    }
}

details.confirmation-btn[open] summary::marker {
    content: "Cancel";
}

details.confirmation-btn[open] > div {
    margin-top: var(--space-sm);
    display: block;
    animation: animateDown 0.1s ease-in-out forwards;
}

details.confirmation-btn > div {
    display: none;

    & p {
        margin-bottom: var(--space-sm);
    }
}

@keyframes animateDown {
  0% {
    opacity: 0;
    transform: translatey(-15px);
  }
  100% {
    opacity: 1;
    transform: translatey(0);
  }
}

.confirmation[popover]:popover-open {
    border: none;
    border-radius: var(--border-radius);
    padding: var(--space-md);
    position: fixed;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
}

.confirmation[popover]::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

dialog .dialog-actions {
    display: flex;
    gap: var(--space-xs);
}

.success {
    color: color-mix(in lab, var(--success), var(--black) 50%);
    background-color: color-mix(in lab, var(--success), var(--white) 70%);
    border-color: var(--success)
}

.error {
    color: color-mix(in lab, var(--error), var(--black) 50%);
    background-color: color-mix(in lab, var(--error), var(--white) 70%);
    border-color: var(--error)
}

.info {
    color: color-mix(in lab, var(--info), var(--black) 50%);
    background-color: color-mix(in lab, var(--info), var(--white) 70%);
    border-color: var(--info)
}

details.toast > summary,
aside {
    padding: var(--space-sm) var(--space-md);
    border-width: var(--border-width);
    border-style: solid;
    border-radius: var(--border-radius);
}

aside {
    margin-bottom: var(--space-md);
}

table {
    table-layout: auto;
    border-collapse: collapse;
    width: 100%;
    th {
        text-align: left;
    }

    th,
    td {
        width: 100%;
        white-space: nowrap;
        padding: var(--space-sm);
    }

    tbody {
        tr:nth-child(odd) {
            background-color: var(--white);
        }
    }

    .actions {
        text-align: right;
        display: flex;
        gap: var(--space-xs);
        white-space: nowrap;
    }
}

.grid-table {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr 1fr;
    justify-content: space-around;

    .sample {
        grid-column-start: 1;
        grid-column-end: 5;

        white-space: pre;
        white-space: nowrap;
        overflow-x: auto;
        margin-bottom: var(--space-sm);
        padding: var(--space-sm);
        font-family: monospace;
    }

    .grid-table-header {
        font-weight: var(--bold);

        margin-bottom: var(--space-sm);
    }

    div:not(.grid-table-header) {
        background-color: var(--white);
    }
}

.nowrap {
    white-space: nowrap;
}