/***************************
 * Pocillo!_GTK+ Version 0.5 *
 ***************************/

// Base-sizes
$mini_size: if($compact == 'false',4px, 2px);
$tiny_size: if($compact == 'false', 12px, 10px);
$small_size: if($compact == 'false', 16px, 14px);
$medium_size: if($compact == 'false', 24px, 20px);
$large_size: if($compact == 'false', 32px, 28px);

// Widgets - Define widget sizes here, and
// define custom sizes as derivative of these
$border_size: 1px;
$button_size: $medium_size;
$check_size: $small_size - 4px;
$titlebar_size: $medium_size;
$entry_size: $medium_size;
$sidebar_placeholder_size: 4px;
$separator_size: 1px;
$headerbar-size: 40px;
$headerbar_button_size: if($compact == 'false', 8px, 6px);
$close_button_size: $small_size;
$bar_size: 4px;
$menuitem_size: $small_size;
$shortcut_key_size: $medium_size;
$scale_trough_size: $bar_size;
$scale_slider_size: $tiny_size;
$scale_marks_size: 6px;
$scrollbar_size: 8px;
$switch_size: $small_size + 4;
$toolbar_size: if($compact == 'false', 42px, 32px);

// Padding
$no_padding: if($compact == 'false', 1px, 0);
$mini_padding: if($compact == 'false', 2px, 1px);
$tinier_padding: if($compact == 'false', 4px, 3px);
$tiny_padding: if($compact == 'false', 6px, 4px);
$small_padding: if($compact == 'false', 8px, 6px);
$standard_padding: if($compact == 'false', 12px, 10px);
$large_padding: if($compact == 'false', 16px, 12px);

$no_padding_em: if($compact == 'false', 0.1em, 0);
$mini_padding_em: if($compact == 'false', 0.15em, 0);
$tinier_padding_em: if($compact == 'false', 0.3em, 0.2em);
$tiny_padding_em: if($compact == 'false', 0.5em, 0.3em);
$small_padding_em: if($compact == 'false', 0.6em, 0.3em);
$standard_padding_em: if($compact == 'false', 1em, 0.8em);
$large_padding_em: if($compact == 'false', 1.4em, 1em);

// Widget paddings - Try to use Sparingly.
$container_padding: 6px;
$image_button_padding: if($compact == 'false', 4px, 2px);
$menu_padding: if($compact == 'false', 4px, 2px);


// Radii and other curves
$pocillo_radius: 4px;
$shortcut_key_radius: 3px;
$circular_radius: 9999px;



// opacities
$higher_opacity: 0.9;
$middle_opacity: 0.6;
$lower_opacity: 0.3;


// Everything below here is an old variable.
// They shouldn't be used for new development.

/*
$tiny_size: if($compact == 'false', 8px, 4px);
$smaller_size: if($compact == 'false', 12px, 8px);
$small_size: if($compact == 'false', 24px, 20px);
$medium_size: if($compact == 'false', 36px, 32px);
$large_size: if($compact == 'false', 48px, 40px);
*/

$asset_suffix: if($variant == 'dark', '-dark', '');
$extra_background_clip: if($variant == 'light', padding-box, border-box);

// opacities
$higher_opacity: 0.9;
$middle_opacity: 0.6;
$lower_opacity: 0.3;

$secondary_opacity: 0.75;
$hint_opacity: 0.6;
$disabled_opacity: 0.5;



// radiuses
$material_radius: 4px;
$other_radius: 4px;
$small_radius: 4px;

//margins-padding
$large_space: 12px;
$normal_space: 6px;
$small_space: 2px;

// durations
$shorter_duration: 180ms;
$longer_duration: 270ms;
$ripple_duration: 450ms;

// timing functions
$standard_curve: cubic-bezier(0.4, 0.0, 0.2, 1);
$deceleration_curve: cubic-bezier(0.0, 0.0, 0.2, 1);
$acceleration_curve: cubic-bezier(0.4, 0.0, 1, 1);
$sharp_curve: cubic-bezier(0.4, 0.0, 0.6, 1);

// transition shorthands
$shorter_transition: all $shorter_duration $standard_curve;
$longer_transition: all $longer_duration $standard_curve;
$shadow_transition: box-shadow $shorter_duration $standard_curve;
$menu_transition: all 0.1s $sharp_curve;

// shadows
// based shadow values:
// https://material-design.storage.googleapis.com/images/layout-principles-dimensionality-shadows-08_large_mdpi.png

// box-shadow 1px blur doesn't draw correctly, see
// https://bugzilla.gnome.org/show_bug.cgi?id=738484
// $shadow_1: 0 1px 1.5px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
$shadow_0: 0 1px 1px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.08);
$shadow_1: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
$shadow_2: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
$shadow_3: 0 10px 10px rgba(0, 0, 0, 0.19), 0 6px 3px rgba(0, 0, 0, 0.23);
$shadow_4: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22);
$shadow_5: 0 19px 19px rgba(0, 0, 0, 0.30), 0 15px 6px rgba(0, 0, 0, 0.22);
