// Import Gutenberg variables
@import 'node_modules/@wordpress/base-styles/colors';
@import 'node_modules/@wordpress/base-styles/variables';
@import 'node_modules/@wordpress/base-styles/mixins';
@import 'node_modules/@wordpress/base-styles/breakpoints';
@import 'node_modules/@wordpress/base-styles/animations';
@import 'node_modules/@wordpress/base-styles/z-index';

$fallback-gutter: 24px;
$fallback-gutter-large: 40px;
$gutter: var(--main-gap);
$gutter-large: var(--large-gap);

$gap-largest: 40px;
$gap-larger: 36px;
$gap-large: 24px;
$gap: 16px;
$gap-small: 12px;
$gap-smaller: 8px;
$gap-smallest: 4px;

// Header
$header-height: 56px;

// Sidebar
$sidebar-width: 272px;

// @todo Remove this spacing variable
$spacing: 16px;

// Gutenberg variable overrides.
$white: $studio-white;
$black: $studio-black;
$light-gray-100: $core-grey-light-100;
$light-gray-200: $core-grey-light-200;
$light-gray-300: $core-grey-light-300;
$light-gray-400: $core-grey-light-400;
$light-gray-500: $core-grey-light-500;
$light-gray-600: $core-grey-light-600;
$light-gray-700: $core-grey-light-700;
$light-gray-800: $core-grey-light-800;
$light-gray-900: $core-grey-light-900;
$dark-gray-100: $core-grey-dark-100;
$dark-gray-200: $core-grey-dark-200;
$dark-gray-300: $core-grey-dark-300; // This & below have 4.5+ contrast against white
$dark-gray-400: $core-grey-dark-400;
$dark-gray-500: $core-grey-dark-500;
$dark-gray-600: $core-grey-dark-600;
$dark-gray-700: $core-grey-dark-700;
$dark-gray-800: $core-grey-dark-800;
$dark-gray-900: $core-grey-dark-900;
$alert-red: $error-red;
$alert-yellow: $notice-yellow;
$alert-green: $valid-green;

// WordPress defaults
$adminbar-height: 32px;
$adminbar-height-mobile: 46px;

// wp-admin colors
$wp-admin-background: #f1f1f1;
$wp-admin-sidebar: #24292d;
$theme-color: #3858e9;

// Muriel
$muriel-box-shadow-1dp: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
	0 1px 3px 0 rgba(0, 0, 0, 0.12);
$muriel-box-shadow-6dp: 0 3px 5px rgba(0, 0, 0, 0.2), 0 1px 18px rgba(0, 0, 0, 0.12),
	0 6px 10px rgba(0, 0, 0, 0.14);
$muriel-box-shadow-8dp: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
	0 3px 14px 2px rgba(0, 0, 0, 0.12);