
@import 'tweaks-temp';

$asset-suffix: if($variant == 'dark', '-dark', '');
$theme-asset-suffix: if($topbar == 'dark', if($variant == 'dark', '-dark', ''), '-light');

//
// Sizes
//

$small-size: if($compact == 'false', 22px, 20px);
$medium-size: if($compact == 'false', 32px, 28px);
$large-size: if($compact == 'false', 44px, 36px);

$space-size: if($compact == 'false', 6px, 4px);
$bar-size: if($window == 'round', 6px, 3px);
$menuitem-size: 28px;

//
// Radius
//

$window-radius: if($window == 'round', 8px, 3px);
$corner-radius: if($window == 'round', 4px, 2px);
$menu-radius: if($window == 'round', 6px, 3px);
$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(0.4, 0.0, 0.2, 1);
$ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
$ease-in: cubic-bezier(0.4, 0.0, 1, 1);
$ease-in-out: cubic-bezier(0.4, 0.0, 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/_variables.scss

// NOTE: box-shadow blur less than 2px doesn't work properly, see
// https://gitlab.gnome.org/GNOME/gtk/issues/511

// NOTE 2: Compared to rendering on the Web, GTK seems to have a bigger blur.

$shadow-z1:
  0 1px 2px rgba(black, 0.15),
  0 0 1px rgba(black, 0.12),
  0 1px 2px rgba(black, 0.1);
$shadow-z2:
  0 3px 4px rgba(black, 0.15),
  0 2px 2px rgba(black, 0.16),
  0 1px 3px rgba(black, 0.12);
$shadow-z3:
  0 1px 1px rgba(black, 0.08),
  0 2px 3px rgba(black, 0.14),
  0 1px 3px rgba(black, 0.12);
$shadow-z4:
  0 1px 2px rgba(black, 0.1),
  0 3px 4px rgba(black, 0.14),
  0 1px 6px rgba(black, 0.12);
$shadow-z5:
  0 1px 2px rgba(black, 0.06),
  0 3px 4px rgba(black, 0.08),
  0 1px 6px rgba(black, 0.06);
$shadow-z6:
  0 1px 2px rgba(black, 0.12),
  0 4px 5px 0 rgba(black, 0.16),
  0 1px 6px 0 rgba(black, 0.1);
$shadow-z8:
  0 2px 0 rgba(black, 0.08),
  0 7px 9px rgba(black, 0.15),
  0 5px 11px rgba(black, 0.16);
$shadow-z12:
  0 1px 3px rgba(black, 0.1),
  0 14px 15px rgba(black, 0.15),
  0 9px 17px rgba(black, 0.15);
$shadow-z16:
  0 1px 3px rgba(black, 0.1),
  0 16px 18px rgba(black, 0.15),
  0 11px 23px rgba(black, 0.13);
$shadow-z24:
  0 2px 4px rgba(black, 0.1),
  0 25px 28px rgba(black, 0.16),
  0 17px 36px rgba(black, 0.15);

$text-shadow:
  0 1px 1px rgba(black, 0.2),
  0 1px 2px rgba(black, 0.14),
  0 1px 3px rgba(black, 0.12);

// workaround for selection-mode checkboxes
$icon-shadow-z2:
  0 1px 1px rgba(black, 0.2),
  0 2px 2px rgba(black, 0.14),
  0 1px 3px rgba(black, 0.12);
$icon-shadow-z4:
  0 2px 2px rgba(black, 0.2),
  0 3px 4px rgba(black, 0.14),
  0 1px 6px rgba(black, 0.12);
