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

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

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

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

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

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

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

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

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