$compact: false !default;
$toolkit: "none" !default;

$asset-suffix: if($dark-theme, "-dark", "");

//
// Sizes
//

$container-padding: 6px;
$small-size: 24px;
$medium-size: 36px;
$large-size: 48px;

@if $compact {
  $container-padding: 4px;
  $small-size: 24px;
  $medium-size: 32px;
  $large-size: 40px;
}

$bar-size: 4px;
$menuitem-size: 28px;

//
// Radii
//

$corner-radius: 4px;
$circular-radius: 9999px;

//
// Durations
//

$duration: 75ms;
$ripple-fade-in-duration: 225ms;
$ripple-fade-out-duration: 300ms;
$ripple-fade-out-opacity-duration: 1200ms;

//
// Timing functions
//

$ease: cubic-bezier(.4, 0, .2, 1);
$ease-out: cubic-bezier(0, 0, .2, 1);
$ease-in: cubic-bezier(.4, 0, 1, 1);
$ease-in-out: cubic-bezier(.4, 0, .6, 1);

//
// Transition shorthands
//

$transition: all $duration $ease-out;
$transition-shadow: box-shadow $duration $ease-out;

//
// Shadows
//

// Values are based on:
// https://github.com/material-components/material-components-web/blob/master/packages/mdc-elevation/_elevation-theme.scss

$shadow-z1:
  0 2px 1px -1px rgba(black, .2),
  0 1px 1px 0 rgba(black, .14),
  0 1px 3px 0 rgba(black, .12);
$shadow-z2:
  0 3px 1px -2px rgba(black, .2),
  0 2px 2px 0 rgba(black, .14),
  0 1px 5px 0 rgba(black, .12);
$shadow-z3:
  0 3px 3px -2px rgba(black, .2),
  0 3px 4px 0 rgba(black, .14),
  0 1px 8px 0 rgba(black, .12);
$shadow-z4:
  0 2px 4px -1px rgba(black, .2),
  0 4px 5px 0 rgba(black, .14),
  0 1px 10px 0 rgba(black, .12);
$shadow-z6:
  0 3px 5px -1px rgba(black, .2),
  0 6px 10px 0 rgba(black, .14),
  0 1px 18px 0 rgba(black, .12);
$shadow-z8:
  0 5px 5px -3px rgba(black, .2),
  0 8px 10px 1px rgba(black, .14),
  0 3px 14px 2px rgba(black, .12);
$shadow-z12:
  0 7px 8px -4px rgba(black, .2),
  0 12px 17px 2px rgba(black, .14),
  0 5px 22px 4px rgba(black, .12);
$shadow-z16:
  0 8px 10px -5px rgba(black, .2),
  0 16px 24px 2px rgba(black, .14),
  0 6px 30px 5px rgba(black, .12);
$shadow-z24:
  0 11px 15px -7px rgba(black, .2),
  0 24px 38px 3px rgba(black, .14),
  0 9px 46px 8px rgba(black, .12);

$text-shadow:
  0 1px 1px rgba(black, .2),
  0 1px 2px rgba(black, .14),
  0 1px 3px rgba(black, .12);

// workaround for selection-mode checkboxes
$icon-shadow-z2:
  0 1px 1px rgba(black, .2),
  0 2px 2px rgba(black, .14),
  0 1px 5px rgba(black, .12);
$icon-shadow-z4:
  0 2px 3px rgba(black, .2),
  0 4px 5px rgba(black, .14),
  0 1px 10px rgba(black, .12);

// Note that GTK 3 does not support blur below 2px,
// and its blur is huge compared to web rendering.
// See: https://gitlab.gnome.org/GNOME/gtk/issues/511
@if $toolkit == "gtk3" {
  $shadow-z1:
    0 2px 2px -2px rgba(black, .3),
    0 1px 2px -1px rgba(black, .24),
    0 1px 2px -.6px rgba(black, .17);
  $shadow-z2:
    0 3px 2px -3px rgba(black, .3),
    0 2px 2px -1px rgba(black, .24),
    0 1px (5px * .6) 0 rgba(black, .12);
  $shadow-z3:
    0 3px 2px -2px rgba(black, .2),
    0 3px (4px * .6) 0 rgba(black, .14),
    0 1px (8px * .6) 0 rgba(black, .12);
  $shadow-z4:
    0 2px (4px * .6) -1px rgba(black, .2),
    0 4px (5px * .6) 0 rgba(black, .14),
    0 1px (10px * .6) 0 rgba(black, .12);
  $shadow-z6:
    0 3px (5px * .6) -1px rgba(black, .2),
    0 6px (10px * .6) 0 rgba(black, .14),
    0 1px (18px * .6) 0 rgba(black, .12);
  $shadow-z8:
    0 5px (5px * .6) -3px rgba(black, .2),
    0 8px (10px * .6) 1px rgba(black, .14),
    0 3px (14px * .6) 2px rgba(black, .12);
  $shadow-z12:
    0 7px (8px * .6) -4px rgba(black, .2),
    0 12px (17px * .6) 2px rgba(black, .14),
    0 5px (22px * .6) 4px rgba(black, .12);
  $shadow-z16:
    0 8px (10px * .6) -5px rgba(black, .2),
    0 16px (24px * .6) 2px rgba(black, .14),
    0 6px (30px * .6) 5px rgba(black, .12);
  $shadow-z24:
    0 11px (15px * .6) -7px rgba(black, .2),
    0 24px (38px * .6) 3px rgba(black, .14),
    0 9px (46px * .6) 8px rgba(black, .12);

  $text-shadow:
    0 1px 1px rgba(black, .2),
    0 1px 2px rgba(black, .14),
    0 1px 3px rgba(black, .12);

  $icon-shadow-z2:
    0 1px 1px rgba(black, .2),
    0 2px 2px rgba(black, .14),
    0 1px (5px * .6) rgba(black, .12);
  $icon-shadow-z4:
    0 2px 2px rgba(black, .2),
    0 4px (5px * .6) rgba(black, .14),
    0 1px (10px * .6) rgba(black, .12);
}

@if $toolkit == "st" {
  $shadow-z1: 0 1px 1px rgba(black, .36);
  $shadow-z2: 0 1px 2px rgba(black, .4);
  $shadow-z4: 0 2px 8px rgba(black, .44);
  $shadow-z8: 0 5px 16px rgba(black, .5);
  $shadow-z16: 0 8px 24px rgba(black, .68); // TODO
}