// Bourbon
// See: https://www.bourbon.io/docs/latest/
@import 'bourbon';

// Susy
// Susy grid system. See: http://oddbird.net/susy/docs/
@import 'node_modules/susy/sass/susy';

// Vendors
// External libraries and frameworks.
@import '../sass/vendors/modular-scale';

// Utilities
// Sass tools and helpers used across the project.
@import '../sass/utils/variables';
@import '../sass/utils/mixins';

/**
 * Base styles
 */

.editor-block-list__block,
.editor-default-block-appender textarea.editor-default-block-appender__content,
.editor-post-title__block .editor-post-title__input {
	font-family: $base-font;
}

.editor-block-list__block,
.editor-block-list__block p,
.editor-default-block-appender textarea.editor-default-block-appender__content {
	font-size: 16px;
	line-height: 1.618;
}

// Post title
.editor-post-title__block {
	position: relative;
	margin-bottom: ms(1);

	&::after {
		content: none;
		position: absolute;
		top: auto;
		bottom: 0;
		right: 14px;
		left: 14px;
		border-bottom: 1px solid rgba( 0, 0, 0, 0.05);
	}

	@media ( min-width: $desktop ) {
		margin-bottom: ms(5);
	}
}

.editor-post-title__block .editor-post-title__input {
	clear: both;
	font-weight: 300;
	font-size: ms(5);
	line-height: 1.214;
	letter-spacing: -1px;
}

// Headings - applies to both Classic and Header blocks
h1,
.wp-block-freeform.block-library-rich-text__tinymce h1,
h2,
.wp-block-freeform.block-library-rich-text__tinymce h2,
h3,
.wp-block-freeform.block-library-rich-text__tinymce h3,
h4,
.wp-block-freeform.block-library-rich-text__tinymce h4,
h5,
.wp-block-freeform.block-library-rich-text__tinymce h5,
h6,
.wp-block-freeform.block-library-rich-text__tinymce h6 {
	clear: both;
	font-weight: 300;
	margin: 0 0 ms(-3);
}

h1,
.wp-block-freeform.block-library-rich-text__tinymce h1 {
	font-size: ms(5);
	line-height: 1.214;
	letter-spacing: -1px;
}

h2,
.wp-block-freeform.block-library-rich-text__tinymce h2 {
	font-size: 2em;
	line-height: 1.214;

	& + h3 {
		border-top: 1px solid $color_border;
		padding-top: ms(-3);
	}
}

h3,
.wp-block-freeform.block-library-rich-text__tinymce h3 {
	font-size: ms(3);
}

h4,
.wp-block-freeform.block-library-rich-text__tinymce h4 {
	font-size: ms(2);
}

p,
ul,
ol,
table,
blockquote,
form {
	& + h2,
	& + header h2,
	& + h3,
	& + h4 {
		margin-top: ms(4);
	}
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin: 0 0 ms(2);
}

p {
	margin: 0 0 ms(2);
}

ul,
ol {
	margin: 0 0 ms(2) 3em;
	padding: 0;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: ms(1);
}

dt {
	font-weight: 600;
}

dd {
	margin: 0 0 ms(3);
}

b,
strong {
	font-weight: 600;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote,
.wp-block-freeform.block-library-rich-text__tinymce blockquote {
	margin: 1em 40px;
	padding: 0 ms(1);
	border-left: 3px solid rgba( 0, 0, 0, 0.05 );
	font-style: italic;
	box-shadow: none;
}

address {
	margin: 0 0 ms(2);
}

pre {
	background: rgba( #000, 0.1 );
	font-family: 'Courier 10 Pitch', Courier, monospace;
	margin-bottom: ms(3);
	padding: ms(3);
	overflow: auto;
	max-width: 100%;
}

code,
kbd,
tt,
var {
	font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace;
	background-color: rgba( 0, 0, 0, 0.05 );
	padding: 0.202em ms(-3);
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	text-decoration: none;
	font-weight: 600;
	background: transparent;
}

sup,
sub {
	font-size: 75%;
	height: 0;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	bottom: 1ex;
}

sub {
	top: 0.5ex;
}

small {
	font-size: 75%;
}

big {
	font-size: 125%;
}

figure {
	margin: 0;
}

img {
	height: auto; // Make sure images are scaled correctly.
	max-width: 100%; // Adhere to container width.
	display: block;
}

a {
	text-decoration: none;
}

table {
	border-spacing: 0;
	width: 100%;
	border-collapse: separate;
	margin: 0 0 ms(2);

	caption {
		padding: 1em 0;
		font-weight: 600;
	}

	td,
	th {
		padding: 1em ms(2);
		text-align: left;
		vertical-align: top;
		border: 0;

		p:last-child {
			margin-bottom: 0;
		}
	}

	th {
		font-weight: 600;
	}

	thead {
		th {
			padding: ms(2);
			vertical-align: middle;
		}
	}

	tbody {
		h2 {
			font-size: 1em;
			letter-spacing: normal;
			font-weight: normal;

			a {
				font-weight: normal;
			}
		}
	}
}

/**
 * Block styles
 */

// Main content width
.wp-block {
	max-width: $container-width;

	.storefront-has-sidebar & {
		$span-value: span(9) / 100;
		max-width: calc(#{$container-width} * #{$span-value / ( $span-value * 0 + 1 )}); // Unitless hack.
	}
}

.wp-block[data-align='wide'] {
	max-width: ms(19);
}

.wp-block[data-align='full'] {
	max-width: none;
}

// Tables
.wp-block-table {
	&__cell-content {
		padding: 0;
	}
}

// Latest posts, categories, archives
ul.wp-block-archives,
.wp-block-categories ul,
ul.wp-block-latest-posts {
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
	list-style: none;
}

// Separator
.wp-block-separator {
	margin-top: ms(2);
	margin-bottom: ms(2);

	&.is-style-dots {
		&::before {
			padding-left: 1em;
			letter-spacing: 1em;

			.wp-block & {
				padding-left: 2em;
				letter-spacing: 2em;
			}
		}
	}

	&:not( .is-style-dots ) {
		height: 2px;

		.wp-block & {
			height: 1px;
		}
	}
}

// Grid blocks
.wc-block-grid__products {
	.wc-block-grid__product {
		.wp-block-button__link {
			color: #333333;
		}
		.wc-block-grid__product-onsale {
			border: 1px solid;
			border-color: $color_body;
			color: $color_body;
			padding: 0.202em ms(-2);
			font-size: ms(-1);
			text-transform: uppercase;
			font-weight: 600;
			display: inline-block;
			margin-bottom: 1em;
			border-radius: 3px;
			position: relative;
		}
		.wc-block-grid__product-title {
			font-weight: 400;
			font-size: 1rem;
			color: #000000;
		}
	}
}
