styles_src.css

/* Theme colors */
:root {
    --ironsworn-mechanic-color-gray-20: #e0e0e0;
    --ironsworn-mechanic-color-gray-50: #c0c0c0;
    --ironsworn-mechanic-color-gray-90: #333;
    --ironsworn-mechanic-color-gray-30: #dad8d8;

    --ironsworn-mechanic-background-color: #fff;

    --ironsworn-mechanic-text-color: var(--ironsworn-mechanic-color-gray-90);
    --ironsworn-mechanic-text-color-link: #082840;
    --ironsworn-mechanic-text-color-link-active: #5f2b48;
    --ironsworn-mechanic-text-color-link-visited: #17050f;

    --ironsworn-mechanic-syntax-tab-size: 2;
}

.ironsworn-mechanic-move {
    cursor: default;
    margin: 0.5em auto;
    border: 1px solid var(--ironsworn-mechanic-color-gray-90);
    border-radius: 10px;
    max-width: 400px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
    &[open] summary:has(+ *) {
        border-bottom: 1px dashed var(--ironsworn-mechanic-color-gray-50);
    }
    &.strong-hit summary:after {
        background-image: url("img/Outcomes/outcome-strong-hit.svg");
    }
    &.weak-hit summary:after {
        background-image: url("img/Outcomes/outcome-weak-hit.svg");
    }
    &.miss summary:after {
        background-image: url("img/Outcomes/outcome-miss.svg");
    }
    & summary {
        display: block;
        border: none;
        width: 100%;
        padding: 0.5em 1em;
        text-align: left;
        font-weight: bolder;
        &:after {
            content: " ";
            float: right;
            margin-left: auto;
            background-repeat: no-repeat;
            height: 30px;
            width: 50px;
        }
    }

    & > :not(:nth-child(1)) {
        margin: 1em 2em;
    }

    & p.detail {
        font-weight: bold;
        &:before {
            content: "➡️";
            margin-right: 0.5em;
        }
    }

    & p.roll,
    & p.progress-roll,
    & p.reroll {
        font-weight: bold;
        &:before {
            content: "🎲";
            margin-right: 0.5em;
        }
    }

    & dl {
        display: flex;
        flex-wrap: wrap;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: calc(50px * 5);
        & dt,
        & dd {
            display: inline-block;
            margin: auto;
            height: 30px;
            text-indent: -9999px;
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            text-align: center;
        }
        &:after {
            font-weight: bold;
            text-align: center;
            margin: auto;
        }
        &.strong-hit {
            &:after {
                content: "Strong Hit";
                color: green;
            }
            &.match:after {
                content: "Strong Hit (Match)";
            }
            & dd.outcome {
                background-image: url("img/Outcomes/outcome-strong-hit.svg");
            }
        }
        &.weak-hit {
            &:after {
                content: "Weak Hit";
                color: goldenrod;
            }
            &.match:after {
                content: "Weak Hit (Match)";
            }
            & dd.outcome {
                background-image: url("img/Outcomes/outcome-weak-hit.svg");
            }
        }
        &.miss {
            &:after {
                content: "Miss";
                color: red;
            }
            &.match:after {
                content: "Miss (Match)";
            }
            & dd.outcome {
                background-image: url("img/Outcomes/outcome-miss.svg");
            }
        }
        &.reroll dt {
            margin: auto;
            width: 30px;
            flex-basis: 1em;
            &:has(+ .action-die ~ .action-die) {
                width: 0;
                height: 0;
                display: none;
            }
            &:has(+ .action-die),
            &:has(+ .challenge-die) {
                text-indent: 0;
                visibility: hidden;
                &:before {
                    content: "➡️";
                    text-align: center;
                    visibility: visible;
                    position: absolute;
                    margin: 0.5em;
                    max-width: 2em;
                }
            }
            &:has(+ .challenge-die ~ .challenge-die) {
                width: 100%;
                flex-basis: initial;
                height: 0.2em;
                &:before {
                    content: none;
                }
            }
            &:has(+ .score) {
                background-image: url("img/Words/equals-t.svg");
                width: 100%;
                flex-basis: initial;
            }
            &:has(+ .outcome) {
                background-image: url("img/Words/equals-t.svg");
                width: 100%;
                flex-basis: initial;
            }
        }
        &.roll dt {
            margin: auto;
            width: 30px;
            flex-basis: 1em;
            &:has(+ .action-die) {
                width: 0;
                height: 0;
                display: none;
            }
            &:has(+ .progress-score) {
                width: 0;
                height: 0;
                display: none;
            }
            &:has(+ .stat) {
                background-image: url("img/Words/plus-t.svg");
            }
            &:has(+ .adds) {
                background-image: url("img/Words/plus-t.svg");
            }
            &:has(+ .score) {
                background-image: url("img/Words/equals-t.svg");
                width: 100%;
                flex-basis: initial;
                &:before {
                    display: inline;
                    content: "\A";
                }
            }
            &:has(+ .challenge-die) {
                &:before {
                    display: inline;
                    content: "\A";
                }
                flex-basis: initial;
                background-image: url("img/Words/vs-t.svg");
                width: 100%;
                & ~ dt:has(+ .challenge-die) {
                    &:before {
                        content: none;
                    }
                    background-image: url("img/Words/and-t.svg");
                    width: 60px;
                }
            }
            &:has(+ .outcome) {
                background-image: url("img/Words/equals-t.svg");
                width: 100%;
                flex-basis: initial;
                &:before {
                    display: inline;
                    content: "\A";
                }
            }
        }
        & dd {
            width: 60px;
            &.action-die {
                grid-column-start: 1;
                &[data-value="1"] {
                    background-image: url("img/D6/d6-1-t.svg");
                }
                &[data-value="2"] {
                    background-image: url("img/D6/d6-2-t.svg");
                }
                &[data-value="3"] {
                    background-image: url("img/D6/d6-3-t.svg");
                }
                &[data-value="4"] {
                    background-image: url("img/D6/d6-4-t.svg");
                }
                &[data-value="5"] {
                    background-image: url("img/D6/d6-5-t.svg");
                }
                &[data-value="6"] {
                    background-image: url("img/D6/d6-6-t.svg");
                }
            }
            &.stat {
                &[data-value="1"] {
                    background-image: url("img/Stat/stat-1-t.svg");
                }
                &[data-value="2"] {
                    background-image: url("img/Stat/stat-2-t.svg");
                }
                &[data-value="3"] {
                    background-image: url("img/Stat/stat-3-t.svg");
                }
                &[data-value="4"] {
                    background-image: url("img/Stat/stat-4-t.svg");
                }
                &[data-value="5"] {
                    background-image: url("img/Stat/stat-5-t.svg");
                }
            }
            &.adds {
                &[data-value="0"] {
                    background-image: url("img/Add/add-0-t.svg");
                }
                &[data-value="1"] {
                    background-image: url("img/Add/add-1-t.svg");
                }
                &[data-value="2"] {
                    background-image: url("img/Add/add-2-t.svg");
                }
                &[data-value="3"] {
                    background-image: url("img/Add/add-3-t.svg");
                }
                &[data-value="4"] {
                    background-image: url("img/Add/add-4-t.svg");
                }
                &[data-value="5"] {
                    background-image: url("img/Add/add-5-t.svg");
                }
            }
            &.score {
                &[data-value="0"] {
                    background-image: url("img/Total/total-0-t.svg");
                }
                &[data-value="1"] {
                    background-image: url("img/Total/total-1-t.svg");
                }
                &[data-value="2"] {
                    background-image: url("img/Total/total-2-t.svg");
                }
                &[data-value="3"] {
                    background-image: url("img/Total/total-3-t.svg");
                }
                &[data-value="4"] {
                    background-image: url("img/Total/total-4-t.svg");
                }
                &[data-value="5"] {
                    background-image: url("img/Total/total-5-t.svg");
                }
                &[data-value="6"] {
                    background-image: url("img/Total/total-6-t.svg");
                }
                &[data-value="7"] {
                    background-image: url("img/Total/total-7-t.svg");
                }
                &[data-value="8"] {
                    background-image: url("img/Total/total-8-t.svg");
                }
                &[data-value="9"] {
                    background-image: url("img/Total/total-9-t.svg");
                }
                &[data-value="10"] {
                    background-image: url("img/Total/total-10-t.svg");
                }
            }
            &.challenge-die {
                &[data-value="1"] {
                    background-image: url("img/D10/d10-1-t.svg");
                }
                &[data-value="2"] {
                    background-image: url("img/D10/d10-2-t.svg");
                }
                &[data-value="3"] {
                    background-image: url("img/D10/d10-3-t.svg");
                }
                &[data-value="4"] {
                    background-image: url("img/D10/d10-4-t.svg");
                }
                &[data-value="5"] {
                    background-image: url("img/D10/d10-5-t.svg");
                }
                &[data-value="6"] {
                    background-image: url("img/D10/d10-6-t.svg");
                }
                &[data-value="7"] {
                    background-image: url("img/D10/d10-7-t.svg");
                }
                &[data-value="8"] {
                    background-image: url("img/D10/d10-8-t.svg");
                }
                &[data-value="9"] {
                    background-image: url("img/D10/d10-9-t.svg");
                }
                &[data-value="10"] {
                    background-image: url("img/D10/d10-10-t.svg");
                }
            }
            &.progress-score {
                &[data-value="0"] {
                    background-image: url("img/Progress/progress-0-t.svg");
                }
                &[data-value="1"] {
                    background-image: url("img/Progress/progress-1-t.svg");
                }
                &[data-value="2"] {
                    background-image: url("img/Progress/progress-2-t.svg");
                }
                &[data-value="3"] {
                    background-image: url("img/Progress/progress-3-t.svg");
                }
                &[data-value="4"] {
                    background-image: url("img/Progress/progress-4-t.svg");
                }
                &[data-value="5"] {
                    background-image: url("img/Progress/progress-5-t.svg");
                }
                &[data-value="6"] {
                    background-image: url("img/Progress/progress-6-t.svg");
                }
                &[data-value="7"] {
                    background-image: url("img/Progress/progress-7-t.svg");
                }
                &[data-value="8"] {
                    background-image: url("img/Progress/progress-8-t.svg");
                }
                &[data-value="9"] {
                    background-image: url("img/Progress/progress-9-t.svg");
                }
                &[data-value="10"] {
                    background-image: url("img/Progress/progress-10-t.svg");
                }
            }
        }
    }
}