:root {
    --box-shadow-S: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 5px -2px rgba(0, 0, 0, 0.5);
    --box-shadow-M: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 10px -3px rgba(0, 0, 0, 0.5);
    --box-shadow-L: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 20px -5px rgba(0, 0, 0, 0.5);
    --box-shadow-XL: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 30px -5px rgba(0, 0, 0, 0.5);
    --box-shadow-XXL: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 50px -5px rgba(0, 0, 0, 0.5);

    --box-shadow-SS: 0 0 5px -2px rgba(0, 0, 0, 0.5);
    --box-shadow-SM: 0 0 10px -3px rgba(0, 0, 0, 0.5);
    --box-shadow-SL: 0 0 20px -5px rgba(0, 0, 0, 0.5);
    --box-shadow-SXL: 0 0 30px -5px rgba(0, 0, 0, 0.5);
    --box-shadow-SXXL: 0 0 50px -5px rgba(0, 0, 0, 0.5);
}

/* ============================================================================ */

.shadow-S {
    box-shadow: var(--box-shadow-S) !important;
}
.shadow-S-hover:hover {
    box-shadow: var(--box-shadow-M) !important;
}

.shadow-M {
    box-shadow: var(--box-shadow-M) !important;
}
.shadow-M-hover:hover {
    box-shadow: var(--box-shadow-L) !important;
}

.shadow-L {
    box-shadow: var(--box-shadow-L) !important;
}
.shadow-L-hover:hover {
    box-shadow: var(--box-shadow-XL) !important;
}

.shadow-XL {
    box-shadow: var(--box-shadow-XL) !important;
}
.shadow-XL-hover:hover {
    box-shadow: var(--box-shadow-XXL) !important;
}

.shadow-XXL {
    box-shadow: var(--box-shadow-XXL) !important;
}

.shadow-SS {
    box-shadow: var(--box-shadow-SS) !important;
}
.shadow-SS-hover:hover {
    box-shadow: var(--box-shadow-SM) !important;
}

.shadow-SM {
    box-shadow: var(--box-shadow-SM) !important;
}
.shadow-SM-hover:hover {
    box-shadow: var(--box-shadow-SL) !important;
}

.shadow-SL {
    box-shadow: var(--box-shadow-SL) !important;
}
.shadow-SL-hover:hover {
    box-shadow: var(--box-shadow-SXL) !important;
}

.shadow-SXL {
    box-shadow: var(--box-shadow-SXL) !important;
}
.shadow-SXL-hover:hover {
    box-shadow: var(--box-shadow-SXXL) !important;
}

.shadow-SXXL {
    box-shadow: var(--box-shadow-SXXL) !important;
}