@use 'palette.tokens';
@use 'spacing.tokens';

$drop-shadow-small: none !default;
$drop-shadow-default: 0px 1px spacing.rhythm(1) rgba(0, 0, 0, 0.12) !default;
$drop-shadow-medium: 0px spacing.rhythm(1) spacing.rhythm(2) rgba(0, 0, 0, 0.18) !default;
$drop-shadow-large: 0px spacing.rhythm(1.5) spacing.rhythm(5) rgba(0, 0, 0, 0.24) !default;

$shadow-small: none !default;
$shadow-default:
  $drop-shadow-default,
  0px 0px spacing.rhythm(0.5) rgba(0, 0, 0, 0.1) !default;
$shadow-medium:
  $drop-shadow-medium,
  0px 0px spacing.rhythm(0.5) rgba(0, 0, 0, 0.1) !default;
$shadow-large:
  $drop-shadow-large,
  0px 0px spacing.rhythm(0.5) rgba(0, 0, 0, 0.1) !default;

$color-shadow-focus: rgba(124, 192, 248, 0.6) !default;
$shadow-focus: 0 0 0 spacing.rhythm(0.25) $color-shadow-focus !default;
$shadow-focus-checkbox:
  0 0 0 spacing.rhythm(0.25) palette.$color-light-stronger,
  0 0 0 spacing.rhythm(0.5) $color-shadow-focus !default;
$shadow-modal: $shadow-default !default;