[id^="pf2e-dailies-interface-"] {
    --notify-color: #d9cf40;
    --alert-color: #fd3737;
    --unallowed-color: red;
    --disabled-color: grey;
    --exists-color: #ffa900;
    --gap: 0.3em;
    --right-margin: 0.2em;

    max-height: 80%;
    width: 400px;

    .window-content {
        position: relative;
        padding: 0.5em 0.6em;

        .content {
            .dailies {
                display: grid;
                grid-auto-flow: row;
                gap: 1em;

                hr:last-child {
                    display: none;
                }

                .nothing {
                    text-align: center;
                    font-weight: bold;
                    font-size: 1.3em;
                }

                .group {
                    display: grid;
                    gap: 0.2em var(--gap);
                    align-items: center;
                    grid-template-columns: minmax(30%, auto) minmax(50%, auto);
                    padding-left: var(--gap);

                    > div {
                        display: flex;
                        align-items: center;
                        gap: var(--gap);
                    }

                    .note {
                        font-size: 1.1em;
                    }

                    .browser {
                        font-size: 1.1em;
                    }

                    .alert,
                    .notify {
                        grid-column: 1 / -1;
                        margin-right: 0.1em;

                        input {
                            background: none;
                            text-align: end;
                            border: none;
                        }

                        a > i,
                        span > i {
                            font-size: 1.3em;
                        }
                    }

                    .alert {
                        input:read-only,
                        a {
                            color: var(--alert-color);
                        }
                    }

                    .clear {
                        font-size: 1.5em;

                        &.disabled {
                            pointer-events: none;
                            cursor: default;
                            color: var(--disabled-color);

                            &:hover {
                                text-shadow: none;
                            }
                        }
                    }

                    .die {
                        font-size: 1.2em;
                    }

                    input,
                    select {
                        border-radius: 3px;
                        flex: 1;

                        &:focus {
                            box-shadow: none;
                        }
                    }

                    input {
                        &:read-only {
                            cursor: default;

                            &:focus,
                            &:focus-visible {
                                box-shadow: none;
                            }
                        }
                    }

                    h3 {
                        font-size: 1.5em;
                        grid-column: 1 / -1;
                        margin-bottom: 0.2em;
                    }

                    input {
                        padding-inline: 5px;
                    }

                    select {
                        &.random {
                            padding-inline: 5px;
                        }

                        &:not(.random) {
                            padding-inline: 0;
                        }
                    }

                    @-moz-document url-prefix() {
                        input,
                        select,
                        select:not(.random) {
                            padding-inline: 5px;
                        }
                    }

                    select {
                        &.random {
                            pointer-events: none;
                            appearance: none;
                            line-height: 1;
                        }

                        &:disabled {
                            cursor: not-allowed;

                            &[editable] > button {
                                stroke: var(--unallowed-color);
                            }
                        }
                    }

                    .combo {
                        position: relative;

                        select,
                        input {
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                        }

                        input {
                            width: calc(100% - 20px);
                            border-radius: 3px 0 0 3px;
                            border-right: 1px solid var(--background);
                        }

                        select {
                            width: 100%;
                        }
                    }

                    .drop {
                        input {
                            outline: none;
                            pointer-events: all;

                            &.exists {
                                box-shadow: inset 0 0 6px var(--exists-color),
                                    0 0 2px var(--exists-color);
                            }
                        }
                    }

                    label {
                        padding-bottom: 1px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;

                        &.empty {
                            color: var(--alert-color);
                            font-weight: bold;
                            text-decoration: underline;

                            &:empty {
                                &::after {
                                    content: "*";
                                }
                            }
                        }
                    }

                    .combo,
                    select,
                    option,
                    input,
                    input:disabled,
                    input:read-only,
                    select:disabled {
                        color: var(--color-text-primary);
                        height: 26px;
                    }
                }

                &.has-alert {
                    input,
                    select,
                    a:not([data-action="resolve-alert"]) {
                        color: var(--color-text-primary);
                        pointer-events: none;
                    }
                }
            }

            .buttons {
                margin-top: 0.7em;
                display: grid;
                grid-template-columns: 1fr 1fr;
                column-gap: var(--gap);

                &.no-accept {
                    grid-template-columns: 1fr;
                }
            }
        }

        .cover {
            position: absolute;
            inset: 0;
            background-color: rgba(0, 0, 0, 0.411);
            display: flex;
            justify-content: center;
            align-items: center;

            .loader {
                border: 1em solid var(--color-text-primary);
                border-top-color: var(--color-text-dark-primary);
                border-radius: 50%;
                height: min(25%, 8em);
                aspect-ratio: 1/1;
                animation: spin 2s linear infinite;
                margin-top: -10px;
            }

            @keyframes spin {
                from {
                    transform: rotate(0deg);
                }
                to {
                    transform: rotate(360deg);
                }
            }
        }
    }

    &.disabled {
        .window-content {
            pointer-events: none;
        }
    }

    &:not(.disabled) {
        .window-content {
            .cover {
                display: none;
            }
        }
    }
}

.theme-light [id^="pf2e-dailies-interface-"] {
    .window-content .content .dailies {
        .group {
            .combo {
                input {
                    background: url(../../../ui/parchment.jpg) repeat;
                }
            }
        }
    }
}