:root {
    --color-pf2e-ssss-terrible: #ff0000;
    --color-pf2e-ssss-low: #ff8000;
    --color-pf2e-ssss-moderate: #ffff54;
    --color-pf2e-ssss-high: #3cff00;
    --color-pf2e-ssss-extreme: #6cd8ff;
}

.pf2e-see-simple-scale-statistics-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.pf2e-see-simple-scale-statistics-change-mode {
    background: #646363;
    border: 2px solid #d8c384;
    color: #f5efe0;
    flex: auto 0 0;
    font-size: .9em;
    font-weight: 500;
    padding: 4px 1px;
}

.pf2e-see-simple-scale-statistics-change-mode.active {
    background-color: #8e00a4;
}

.pf2e-see-simple-scale-statistics-colors-legend {
    display: flex;
    height: 8px;
}

.pf2e-see-simple-scale-statistics-colors-legend:not(.active) {
    -webkit-filter: grayscale(1);
}

.pf2e-see-simple-scale-statistics-color-in-legend {
    flex: 1;
    /* background-color: defined in the code*/
}

.pf2e-see-simple-scale-statistics-change-mode {
    align-content: center;
}


.pf2e-see-simple-scale-statistics-Terrible-color-primary:not(:hover) {
    text-shadow: 0 0 10px var(--color-pf2e-ssss-terrible);
}

.pf2e-see-simple-scale-statistics-Terrible-color-secondary {
    color: var(--color-pf2e-ssss-terrible) !important;
}

.pf2e-see-simple-scale-statistics-Terrible-color-legend {
    background-color: var(--color-pf2e-ssss-terrible);
}

.pf2e-see-simple-scale-statistics-Terrible-border-primary,
.pf2e-see-simple-scale-statistics-Terrible-border-secondary,
.pf2e-see-simple-scale-statistics-Terrible-border-legend {
    border: var(--color-pf2e-ssss-terrible) 4px;
    border-style: dotted hidden hidden dotted;
}

.pf2e-see-simple-scale-statistics-Low-color-primary:not(:hover) {
    text-shadow: 0 0 10px var(--color-pf2e-ssss-low);
}

.pf2e-see-simple-scale-statistics-Low-color-secondary {
    color: var(--color-pf2e-ssss-low) !important;
}

.pf2e-see-simple-scale-statistics-Low-color-legend {
    background-color: var(--color-pf2e-ssss-low);
}

.pf2e-see-simple-scale-statistics-Low-border-primary,
.pf2e-see-simple-scale-statistics-Low-border-secondary,
.pf2e-see-simple-scale-statistics-Low-border-legend {
    border: var(--color-pf2e-ssss-low) 4px;
    border-style: dotted;
}

.pf2e-see-simple-scale-statistics-Moderate-color-primary:not(:hover) {
    text-shadow: 0 0 10px var(--color-pf2e-ssss-moderate);
}

.pf2e-see-simple-scale-statistics-Moderate-color-secondary {
    color: var(--color-pf2e-ssss-moderate) !important;
}

.pf2e-see-simple-scale-statistics-Moderate-color-legend {
    background-color: var(--color-pf2e-ssss-moderate);
}

.pf2e-see-simple-scale-statistics-Moderate-border-primary,
.pf2e-see-simple-scale-statistics-Moderate-border-secondary,
.pf2e-see-simple-scale-statistics-Moderate-border-legend {
    border: var(--color-pf2e-ssss-moderate) 4px;
    border-style: dashed dotted dotted dashed;
}

.pf2e-see-simple-scale-statistics-High-color-primary:not(:hover) {
    text-shadow: 0 0 10px var(--color-pf2e-ssss-high);
}

.pf2e-see-simple-scale-statistics-High-color-secondary {
    color: var(--color-pf2e-ssss-high) !important;
}

.pf2e-see-simple-scale-statistics-High-color-legend {
    background-color: var(--color-pf2e-ssss-high);
}

.pf2e-see-simple-scale-statistics-High-border-primary,
.pf2e-see-simple-scale-statistics-High-border-secondary,
.pf2e-see-simple-scale-statistics-High-border-legend {
    border: var(--color-pf2e-ssss-high) 4px;
    border-style: solid dashed dashed solid;
}

.pf2e-see-simple-scale-statistics-Extreme-color-primary:not(:hover) {
    text-shadow: 0 0 10px var(--color-pf2e-ssss-extreme);
}

.pf2e-see-simple-scale-statistics-Extreme-color-secondary {
    color: var(--color-pf2e-ssss-extreme) !important;
}

.pf2e-see-simple-scale-statistics-Extreme-color-legend {
    background-color: var(--color-pf2e-ssss-extreme);
}

.pf2e-see-simple-scale-statistics-Extreme-border-primary,
.pf2e-see-simple-scale-statistics-Extreme-border-secondary,
.pf2e-see-simple-scale-statistics-Extreme-border-legend {
    border: var(--color-pf2e-ssss-extreme) 4px;
    border-style: solid;
}

.pf2e-see-simple-scale-statistics-scale-tooltip {
    max-width: 600px;  /* beyond normal maximum */
    .pf2e-see-simple-scale-statistics-tooltip-table {
        th {
            font-weight: normal;
            opacity: 0.7;
        }
        tr:not(:first-child) {
            text-align: right;
        }
        .different-level {
            opacity: 0.5;
        }
        .highlighted {
            opacity: 1;
            font-weight: bold;
            font-size: larger;
        }
    }
}