/**
 * #.# Common SCSS
 *
 * Can include things like variables and mixins
 * that are used across the project.
*/

$primary: hsl(203, 100%, 36%);
$primary-sh: hsl(203, 100%, 32%);
$primary-hl: hsl(203, 77%, 42%);
$primary-sh2: hsl(203, 100%, 29%);
$primary-sh3: hsl(203, 100%, 25%);
$primary-sh4: hsl(203, 100%, 21%);
$primary-sh5: hsl(204, 100%, 18%);
$primary-sh6: hsl(204, 100%, 14%);
$primary-sh7: hsl(204, 100%, 11%);
$primary-sh8: hsl(203, 100%, 7%);
$primary-sh9: hsl(202, 100%, 5%);
$primary-hl2:hsl(203, 59%, 49%);
$primary-hl3: hsl(203, 56%, 55%);
$primary-hl4: hsl(203, 55%, 61%);
$primary-hl5: hsl(203, 55%, 68%);
$primary-hl6: hsl(204, 56%, 74%);
$primary-hl7: hsl(203, 56%, 81%);
$primary-hl8: hsl(204, 55%, 90%);
$primary-hl9: hsl(202, 58%, 94%);
$yellow: hsl(44, 100%, 50%) !default;
$yellow-hl: hsl(44, 100%, 60%) !default;
$yellow-sh: hsl(36, 100%, 46%) !default;
$green: hsl(167, 100%, 31%) !default;
$green-hl: hsl(167, 93%, 39%) !default;
$green-sh: hsl(167, 100%, 24%) !default;
$red: hsl(343, 90%, 49%) !default;
$red-hl: hsl(351, 90%, 61%) !default;
$red-sh: hsl(346, 90%, 38%) !default;
$orange: hsl(14, 100%, 53%) !default;
$orange-hl: hsl(14, 100%, 63%) !default;
$orange-sh: hsl(14, 100%, 41%) !default;
$turquoise: hsl(171, 100%, 41%) !default;
$turquoise-hl: hsl(171, 78%, 55%) !default;
$turquoise-sh: hsl(171, 100%, 26%) !default;
$lightblue: hsl(204, 86%, 53%) !default;
$lightblue-hl: hsl(204, 86%, 65%) !default;
$lightblue-sh: hsl(275, 96, 54%) !default;
$purple: hsl(271, 100%, 71%) !default;
$purple-hl: hsl(271, 100%, 83%) !default;
$purple-sh: hsl(271, 100%, 71%) !default;
$black: hsl(0, 0%, 0%) !default;
$near-black: hsl(0, 0%, 10%) !default;
$medium-black: hsl(0, 0%, 13%) !default;
$light-black: hsl(0, 0%, 20%) !default;
$dark-grey: hsl(0, 0%, 30%) !default;
$medium-grey: hsl(0, 0%, 50%) !default;
$grey: hsl(0, 0%, 70%) !default;
$light-grey: hsl(0, 0%, 96%) !default;
$subtle-grey: hsl(0, 0%, 98%) !default;
$white: hsl(0, 0%, 100%) !default;

$gap: 64px !default; // 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
$xsphone: 324px !default; // 320px + 4px
$tablet: 769px !default; // 960px container + 4rem
$desktop: 960px + 2 * $gap !default; // 1152px container + 4rem
$widescreen: 1152px + 2 * $gap !default;
$widescreen-enabled: true !default; // 1344px container + 4rem
$fullhd: 1344px + 2 * $gap !default;
$fullhd-enabled: true !default; // Miscellaneous

@import 'patterns.scss';

// Add watermark to backend editor
.edit-post-visual-editor {
    background-image: url('background-watermark-white-right.svg');
    background-size: 60rem;
    background-position: right top;
	background-repeat: no-repeat;
}