:root {
  /** Light Background */
  --shadow-small: -2px -2px 5px rgba(255, 255, 255, 0.6), 2px 2px 4px rgba(0, 0, 0, 0.07);
  --shadow-medium: -5px -5px 15px rgba(255, 255, 255, 0.6), 5px 5px 15px rgba(0, 0, 0, 0.07);
  --shadow-large: -15px -15px 20px rgba(255, 255, 255, 0.6), 15px 15px 20px rgba(0, 0, 0, 0.07);
  /** Dark Background*/
  --shadow-small-dark: -2px -2px 5px rgba(255, 255, 255, 0.05), 2px 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-medium-dark: -5px -5px 15px rgba(255, 255, 255, 0.05), 5px 5px 15px rgba(0, 0, 0, 0.3);
  --shadow-large-dark: -15px -15px 20px rgba(255, 255, 255, 0.05), 15px 15px 20px rgba(0, 0, 0, 0.3);
  /** Modifiers */
  --shadow-inset: inset -3px -3px 6px rgba(255, 255, 255, 0.9), inset 3px 3px 6px rgba(0, 0, 0, 0.1);
  --shadow-default: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
}

.dark {
  --shadow-small: var(--shadow-small-dark);
  --shadow-medium: var(--shadow-medium-dark);
  --shadow-large: var(--shadow-large-dark);
}

.uk-box-shadow-small {
  box-shadow: var(--shadow-small);
}

.uk-box-shadow-medium {
  box-shadow: var(--shadow-medium);
}

.uk-box-shadow-large {
  box-shadow: var(--shadow-large);
}

.uk-box-shadow-default {
  box-shadow: var(--shadow-default);
}

.uk-box-shadow-hover-small:hover {
  box-shadow: var(--shadow-small);
}

.uk-box-shadow-hover-medium:hover {
  box-shadow: var(--shadow-medium);
}

.uk-box-shadow-hover-large:hover {
  box-shadow: var(--shadow-large);
}

.uk-box-shadow-default-hover:hover {
  box-shadow: var(--shadow-default);
}

.uk-box-shadow-inner {
  box-shadow: var(--shadow-inset);
}

.uk-box-no-shadow {
  box-shadow: none;
}