dialog {
    padding: 0;
}

.button-bar {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    margin: 0;
    padding: .5em;
    gap: .5em;
}

.unstyled-button {
    all: unset;
    box-sizing: border-box;
    margin: 0;
    padding: .5em;
    cursor: pointer;
    text-align: center;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 8px;

    background-color: var(--darkgrey);
}

.button-bar>* {
    flex: 1;
}

@media(prefers-reduced-motion: no-preference) {
    .button.highlight {
        animation: highlight-animation 5s linear infinite;
        background: linear-gradient(60deg, var(--button-background) 45%, color-mix(in srgb, var(--button-background), white 25%) 50%, var(--button-background) 55%);
        background-size: 300% 300%;
        background-position: 50% center;
    }
}

/* THIS IS BAD, BUT IT ENABLES START AT 50% */
@keyframes highlight-animation {

    0%,
    50%,
    100% {
        background-position: 50% center;
    }

    25% {
        background-position: 100% center;
    }

    75% {
        background-position: 10% center;
    }
}

.ficon {
    width: 1em;
    height: 1em;
    margin-right: 0.5em;
    filter: invert(0);
}

:root {
    --white: black;
    --darkgrey: lightgrey;
}

@media (prefers-color-scheme:dark) {
    :root {
        --white: white;
        --darkgrey: #3d3d3d;
    }

    .ficon {
        filter: invert(1);
    }

}

.dialog {
    border: 3px solid var(--white);
}

.dialog-banner {
    border-bottom: 3px solid var(--white);
}

ul {
    list-style: disc outside;
    margin-left: 1.5em;
}