.box {
    position: relative;
    width: 100%;
    height: 100%;
    
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
    
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;

    --shadow-color: rgba(0, 0, 0, 0.5);
    --shadow: 0 0 var(--shadow-color);

    box-shadow: var(--shadow);
}

.box.box-shadow-void {
    --shadow: 0 0 #0000;
}

.box.box-shadow-xxs {
    --shadow: 0 1px 2px 0 var(--shadow-color);
}

.box.box-shadow-xs {
    --shadow: 0 1px 3px 0 var(--shadow-color), 0 1px 2px -1px var(--shadow-color);
}

.box.box-shadow-sm {
    --shadow: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color);
}

.box.box-shadow-md {
    --shadow: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color);
}

.box.box-shadow-lg {
    --shadow: 0 20px 25px -5px var(--shadow-color), 0 8px 10px -6px var(--shadow-color);
}

.box.box-shadow-xl {
    --shadow: 0 25px 50px -12px var(--shadow-color);
}

.box.box-shadow-xxl {
    --shadow: 0 35px 60px -15px var(--shadow-color);
}

.box.linked {
    cursor: pointer;
}