/**
 * Common SCSS
 *
 * Can include things like Variables and Mixins.
  * that are shared between all of your blocks.
*/

// Colors.

$white: #FFF;
$green: #4CAF50;
$black: #000;


// Hugo's new WordPress shades of gray
// from http://codepen.io/hugobaeta/pen/grJjVp
$dark-gray-900: #191e23;
$dark-gray-800: #23282d;
$dark-gray-700: #32373c;
$dark-gray-600: #40464d;
$dark-gray-500: #555d66; // use this most of the time for dark items
$dark-gray-400: #606a73;
$dark-gray-300: #6c7781;
$dark-gray-200: #7e8993;
$dark-gray-100: #8f98a1;
$light-gray-900: #a2aab2;
$light-gray-800: #b5bcc2;
$light-gray-700: #ccd0d4;
$light-gray-600: #d7dade;
$light-gray-500: #e2e4e7; // good for "grayed" items and borders
$light-gray-400: #e8eaeb;
$light-gray-300: #edeff0;
$light-gray-200: #f3f4f5;
$light-gray-100: #f8f9f9;

// Additional colors
// some from https://make.wordpress.org/design/handbook/foundations/colors/
$blue: #0073aa;
$blue-700: #00669b;
$blue-dark-900: #0071a1;
$blue-medium-900: #006589;
$blue-medium-800: #00739c;
$blue-medium-700: #007fac;
$blue-medium-600: #008dbe;
$blue-medium-500: #00a0d2;
$blue-medium-400: #33B3DB;
$blue-medium-300: #66C6E4;
$blue-medium-200: #BFE7F3;
$blue-medium-100: #E5F5FA;
$blue-medium-highlight: #b3e7fe;

// Alert colors
$alert-yellow: #f0b849;
$alert-red: #d94f4f;
$alert-green: #4ab866;

// Fonts & basics
$default-font: -apple-system,
system-ui,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
"Helvetica Neue",
Arial,
sans-serif;
$default-font-size: 13px;
$default-line-height: 1.4;
$editor-font: "Noto Serif",
serif;
$editor-html-font: menlo,
consolas,
monaco,
monospace;
$editor-font-size: 16px;
$text-editor-font-size: 14px;
$editor-line-height: 1.8;
$big-font-size: 18px;
$mobile-text-min-font-size: 16px; // Any font size below 16px will cause Mobile Safari to "zoom in"


.gutenberg {
	.dgb-editor-label {
		font-size: 13px;
		text-transform: uppercase;
		font-weight: 600;
		font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
		color: $dark-gray-200;
		padding: 2em 0 0;
		background: $white;
		border: none;
		box-shadow: none;
		white-space: nowrap;
		display: block;

		&:first-child {
			padding-top: 0;
		}
	}
}

[class*="dgb-"] form[class*="-link"],
form[class*="dgb-"][class*="-link"],
[class*="dgb-"]+form[class*="-link"] {
	display: flex;
	justify-content: center;
	align-items: center;
}