@import "node_modules/@wordpress/base-styles/variables";
@import "node_modules/@wordpress/base-styles/colors";
@import "node_modules/@wordpress/base-styles/mixins";
@import "node_modules/@wordpress/base-styles/breakpoints";

//Colors
$color-alert-default-bg: #d6efee;
$color-alert-default-color: #094264;
$color-alert-warning-bg: #fbe7dd;
$color-alert-warning-color: #8a4b30;
$color-alert-error-bg: #ffdede;
$color-alert-error-color: #8b343c;
$color-alert-success-bg: #d0eac4;
$color-alert-success-color: #154a28;
$dark-opacity-light-200: rgba(#8b8b96, 0.1);
$light-opacity-light-200: rgba($white, 0.15);

// UI
$animation-transition-default: 0.5s;

//Breakpoints
$break-large-max: 959px;
$break-small-max: 599px;

// Spacing
$spacing: (
	1: 0.5em,
	2: 1em,
	3: 1.5em,
	4: 2em,
	5: 2.5em,
	6: 3em,
	7: 3.5em,
	8: 4em,
	9: 4.5em,
	10: 7em,
);

// CSS Custom Properties
:root {
	--coblocks-spacing--0: 0;
	--coblocks-spacing--1: #{map-get($spacing, 1)};
	--coblocks-spacing--2: #{map-get($spacing, 2)};
	--coblocks-spacing--3: #{map-get($spacing, 3)};
	--coblocks-spacing--4: #{map-get($spacing, 4)};
	--coblocks-spacing--5: #{map-get($spacing, 5)};
	--coblocks-spacing--6: #{map-get($spacing, 6)};
	--coblocks-spacing--7: #{map-get($spacing, 7)};
	--coblocks-spacing--8: #{map-get($spacing, 8)};
	--coblocks-spacing--9: #{map-get($spacing, 9)};
	--coblocks-spacing--10: #{map-get($spacing, 10)};
}

// Colors
$color-alert-default-bg: var(--coblocks-alert-default--color--background, $color-alert-default-bg);
$color-alert-default-color: var(--coblocks-alert-default--color--text, $color-alert-default-color);

$color-alert-warning-bg: var(--coblocks-alert-default--color--background, $color-alert-warning-bg);
$color-alert-warning-color: var(--coblocks-alert-warning--color--text, $color-alert-warning-color);

$color-alert-error-bg: var(--coblocks-alert-default--color--background, $color-alert-error-bg);
$color-alert-error-color: var(--coblocks-alert-error--color--text, $color-alert-error-color);

$color-alert-success-bg: var(--coblocks-alert-default--color--background, $color-alert-success-bg);
$color-alert-success-color: var(--coblocks-alert-error--color--text, $color-alert-success-color);

$godaddy-everyday-blue-600: #09757a;
$godaddy-everyday-blue-500: #00a4a6;
$godaddy-everyday-blue-400: #1bdbdb;

@import "./mixins";
