$box-shadow-small: 0 4px 8px -1px rgba(0, 0, 0, 0.2);
$box-shadow-medium: 0px 6px 20px -2px rgba(0, 0, 0, 0.2);
$box-shadow-large: 0px 15px 50px -10px rgba(0, 0, 0, 0.3);

$border-radius-extra-small: 2px;
$border-radius-small: 4px;
$border-radius-medium: 8px;
$border-radius-big: 16px;

$spacing-xs: 4px;
$spacing-xs-small: 6px;
$spacing-small: 8px;
$spacing-small-medium: 12px;
$spacing-medium: 16px;
$spacing-large: 24px;
$spacing-xl: 32px;
$spacing-xxl: 48px;
$spacing-xxxl: 64px;

$expand-animation-timing: cubic-bezier(0, 0, 0.35, 1);

:root,
.light-app-theme,
.default-app-theme {
  --theme-box-shadow: 50, 51, 56;
}

.dark-app-theme {
  --theme-box-shadow: 245, 246, 248;
}

@mixin box-shadow-small() {
  box-shadow: $box-shadow-small;
  box-shadow: 0 4px 8px -1px rgba(var(--theme-box-shadow), 0.2);
}

@mixin box-shadow-medium() {
  box-shadow: $box-shadow-medium;
  box-shadow: 0px 6px 20px -2px rgba(var(--theme-box-shadow), 0.2);
}

@mixin box-shadow-large() {
  box-shadow: $box-shadow-large;
  box-shadow: 0px 15px 50px -10px rgba(var(--theme-box-shadow), 0.3);
}