:root {
  --box-shadow-XS: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px -1px rgba(0, 0, 0, 0.25);
  --box-shadow-S: 0 0 1px rgba(0, 0, 0, 0.125), 0 2px 5px -2px rgba(0, 0, 0, 0.25);
  --box-shadow-M: 0 0 1px rgba(0, 0, 0, 0.125), 0 3px 10px -3px rgba(0, 0, 0, 0.25);
  --box-shadow-L: 0 0 1px rgba(0, 0, 0, 0.125), 0 5px 20px -5px rgba(0, 0, 0, 0.25);
  --box-shadow-XL: 0 0 1px rgba(0, 0, 0, 0.125), 0 10px 40px -10px rgba(0, 0, 0, 0.25);
  --box-shadow-XXL: 0 0 1px rgba(0, 0, 0, 0.125), 0 20px 60px -20px rgba(0, 0, 0, 0.25);
  --box-shadow-XXXL: 0 0 1px rgba(0, 0, 0, 0.125), 0 20px 80px -20px rgba(0, 0, 0, 0.25);
}

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

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

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

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

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

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

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

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