.page-heading {
    display: flex;
    flex-wrap: wrap;
    > :is(h1, h2, h3, h4, h5, h6) {
        display: inline-block;
    }
    > .actions {
        margin-inline-start: auto;
        align-self: center;
    }
}

.actions > .input-group {
    width: unset;
}

.row-gap {
    row-gap: 0.5rem;
}
.row-gap > * > .form-label,
.row-gap > * > .flow-flex-inline > .form-label {
    margin-bottom: unset;
}
.form-label-margin {
    margin-bottom: 0.5rem;
}

.d-flex .place-end {
    margin-inline-start: auto;
}

.flow-block {
    > *:not(:first-child) {
        margin-block-start: var(--flow-gap, 1rem);
    }
}
ul.flow-block {
    padding-inline-start: unset;
}

.flow-flex-inline {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.5rem 1rem;
}

.-compact-block,
.-compact-block > * {
    line-height: 1;
}

.heading-box {
    margin-block-end: 0.5rem;

    :is(h1, h2, h3, h4, h5, h6) {
        margin-block-end: 0.1rem;
    }
}

.hint {
    text-decoration: underline dotted 1px;
    cursor: help;
}
[data-click-copy] {
    cursor: context-menu;
}

.ribbon {
    display: grid;
    place-content: center;
    padding: 0.25rem 1rem;
}

.badge-lucky-ball {
    background-color: var(--bs-warning);
    color: black;

    width: 2.8em;
    height: 2.8em;
    border-radius: 10rem;
    padding: 0;
    display: inline-grid;
    place-content: center;
}

.view-preferences {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.view-preferences > * {
    display: flex;
    flex-direction: column;
}
.view-preferences > * > label {
    font-size: 0.8rem;
}

/* Bootstrap-like utilities */

:is(input, textarea, select)[readonly] {
    background-color: var(--bs-secondary-bg);
}

:is(input, textarea, select)[data-error] {
    background-color: rgba(var(--bs-danger-rgb), 0.1);
}

.br-top-none {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.accordion-sm {
    --bs-accordion-btn-padding-y: 0.5rem;
}
.card-sm {
    --bs-card-spacer-x: 0.5rem;
    --bs-card-spacer-y: 0.25rem;
}

.check-card[aria-checked='true'] {
    border-color: var(--bs-primary);
}
.check-card:has(input:is([disabled], [readonly])) {
    background-color: var(--bs-secondary-bg);
    pointer-events: none;
    user-select: none;
}

.preview-controls {
    .card {
        --bs-card-spacer-y: 0.25rem;
        --bs-card-spacer-x: 0.5rem;
        --bs-card-bg: #fffa;
        backdrop-filter: blur(4px);
    }
    h2 {
        margin: unset;
    }
    .locale-switcher {
        align-self: center;
    }

    .width-slider {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        align-items: center;

        > .toggles {
            grid-area: 1 / 1;
        }
        .size {
            grid-area: 1 / 2;
            place-self: center stretch;

            display: grid;
            place-items: center;
        }
        .size > * {
            grid-area: 1 / 1;
        }
        .size input {
            place-self: stretch;
        }
        .size .label {
            padding: 0.1em 0.25em;
            border-radius: 10em;

            background-color: rgba(var(--bs-dark-rgb), 0.5);
            color: white;

            font-weight: bold;
            user-select: none;
            pointer-events: none;

            line-height: 1;
        }
    }
}
.frame.preview {
    display: grid;
    margin: 0 auto;
    max-width: calc(100% - 1rem);
    border: solid #ddd8;
    border-width: 0 2px;

    --checkboard-light: transparent;
    --checkboard-dark: #eee;
    --check-size: 20px;
    /* Thanks, https://stackoverflow.com/a/35362074 */
    background-image: linear-gradient(45deg, var(--checkboard-dark) 25%, transparent 25%),
        linear-gradient(-45deg, var(--checkboard-dark) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--checkboard-dark) 75%),
        linear-gradient(-45deg, transparent 75%, var(--checkboard-dark) 75%);
    background-size: var(--check-size) var(--check-size);
    background-position: 0 0, 0 calc(var(--check-size) * 0.5),
        calc(var(--check-size) * 0.5) calc(var(--check-size) * -0.5), calc(var(--check-size) * -0.5) 0px;

    & > .preview-notes {
        background-color: #fffa;
        padding: 0.25rem;
        text-align: center;
        font-size: 0.8rem;

        p {
            margin: 0;
        }

        label {
            color: #666;
            font-size: 0.6rem;
            margin-inline-end: 0.25rem;
        }

        span[data-name] {
            font-weight: bold;
        }
    }

    iframe {
        grid-area: 2 / 1;

        width: 100%;
        transition: opacity 50ms linear;
    }

    iframe:not([aria-visible='true']) {
        opacity: 0;
        pointer-events: none;
    }
}

.frame.preview:not(:has(iframe[aria-visible])) {
    display: none;
}

.editor-container {
    width: 100%;
    min-height: 40vh;
}
.editor-container.-card {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
}
.editor-container {
    border: 1px solid #f0f0f0;
}
.editor-container + textarea {
    display: none;
}

.card[data-email-type] {
    display: flex;
    flex-direction: row;

    .card-body {
        flex: 1;
    }
}
tr[data-email-type] td:first-child {
    border-left: 0.5rem var(--stripe-color) solid;
}
[data-email-type='layout'] {
    --stripe-color: #cfc;
}
[data-email-type='content'] {
    --stripe-color: #fdb;
}
[data-email-type='partial'] {
    --stripe-color: #bcf;
}
.card[data-email-type]::before {
    content: '';
    display: block;
    width: 0.5rem;
    border-radius: inherit;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;

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

.badge[data-email-type] {
    position: relative;
    overflow: hidden;
    padding-inline-start: calc(var(--bs-badge-padding-x) + 0.25rem);
}
.badge[data-email-type]::before {
    content: '';
    background-color: var(--stripe-color);
    position: absolute;
    width: 0.5rem;
    height: 2rem;
    top: 0;
    left: 0;
}

.value-tag {
    display: inline-flex;
    line-height: 1;

    border: 1px solid var(--col-accent, var(--bs-secondary));
    border-radius: 0.5rem;
    overflow: hidden;

    .tag {
        background-color: var(--col-accent, var(--bs-secondary));
        color: var(--col-accent-contrast, var(--bs-light));
    }

    :is(.tag, .value) {
        display: inline-block;
        padding: 0.2em 0.25em;
    }
}

[data-ui-status] .ui-status-indication::before {
    display: inline;
    content: var(--icon);
}

[data-ui-status='pending'] {
    --icon: '⏳';
}

[data-ui-status='ok'] {
    --icon: '✅';
}

[data-ui-status='error'] {
    --icon: '❗️';
}

.heat-indicator {
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    border-radius: 0.2em;

    background-color: var(--bg-heat, dimgray);
    translate: 0 -25%;
}

[data-heat='1'] {
    --bg-heat: #ff3838;
}
[data-heat='2'] {
    --bg-heat: #ff9c38;
}
[data-heat='3'] {
    --bg-heat: #ffff38;
}
[data-heat='4'] {
    --bg-heat: #9cff38;
}
[data-heat='5'] {
    --bg-heat: #38ff38;
}
[data-heat='6'] {
    --bg-heat: #38ff9c;
}
[data-heat='7'] {
    --bg-heat: #38ffff;
}
[data-heat='8'] {
    --bg-heat: #389cff;
}