/* =========================================
   0) TOKENS (sizes, colors, motion)
   ========================================= */
:root {
    --thermo-size: 3.8rem;
    --thermo-transition: 0.2s;
    /* Thermometer colors */
    --thermo-c8: #4B9CD3;
    --thermo-c7: #7BAFD4;
    --thermo-c6: #00A877;
    --thermo-c5: #7FBA77;
    --thermo-c4: #F4C300;
    --thermo-c3: #F7D358;
    --thermo-c2: #F67828;
    --thermo-c1: #D32D2D;
}

/* =========================================
   1) ICON LAYOUT HELPERS
   ========================================= */
.centeredIcons {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* =========================================
   2) THERMOMETER ICON BASE (CSS masks)
   ========================================= */
.thermometerIcons {
    width: var(--thermo-size);
    height: var(--thermo-size);
    mask-size: cover;
    -webkit-mask-size: cover;
    background-color: currentColor;
    cursor: pointer;
    transition: color var(--thermo-transition), transform var(--thermo-transition);
}

    .thermometerIcons:hover,
    .thermometerIcons:focus {
        transform: scale(1.03);
    }

@media (prefers-reduced-motion: reduce) {
    .thermometerIcons {
        transition: none;
    }
}

/* =========================================
   3) THERMOMETER ICON VARIANTS (mask + color)
   ========================================= */
.thermometerColor8 {
    mask-image: url("../static/icons/icon8.svg");
    -webkit-mask-image: url("../static/icons/icon8.svg");
    background-color: var(--thermo-c8);
}

.thermometerColor7 {
    mask-image: url("../static/icons/icon7.svg");
    -webkit-mask-image: url("../static/icons/icon7.svg");
    background-color: var(--thermo-c7);
}

.thermometerColor6 {
    mask-image: url("../static/icons/icon6.svg");
    -webkit-mask-image: url("../static/icons/icon6.svg");
    background-color: var(--thermo-c6);
}

.thermometerColor5 {
    mask-image: url("../static/icons/icon5.svg");
    -webkit-mask-image: url("../static/icons/icon5.svg");
    background-color: var(--thermo-c5);
}

.thermometerColor4 {
    mask-image: url("../static/icons/icon4.svg");
    -webkit-mask-image: url("../static/icons/icon4.svg");
    background-color: var(--thermo-c4);
}

.thermometerColor3 {
    mask-image: url("../static/icons/icon3.svg");
    -webkit-mask-image: url("../static/icons/icon3.svg");
    background-color: var(--thermo-c3);
}

.thermometerColor2 {
    mask-image: url("../static/icons/icon2.svg");
    -webkit-mask-image: url("../static/icons/icon2.svg");
    background-color: var(--thermo-c2);
}

.thermometerColor1 {
    mask-image: url("../static/icons/icon1.svg");
    -webkit-mask-image: url("../static/icons/icon1.svg");
    background-color: var(--thermo-c1);
}