@import "./themes";

$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() {
  @include theme-prop(box-shadow, box-shadow-small);
}

@mixin box-shadow-medium() {
  @include theme-prop(box-shadow, box-shadow-medium);
}

@mixin box-shadow-large() {
  @include theme-prop(box-shadow, box-shadow-large);
}

@mixin hidden-element() {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}