@use "sass:map";
// Default variable overrides
@import "./vendor/bootstrap/custom-variables";
// Bootstrap variables and mixins
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
// Plugin custom variables and functions
@import "./variables";
@import "./functions";

// Default blocks vertical margins for the editor view
@mixin editorDefaultMargins($margin: $default-blocks-vertical-margin) {
	.editor-styles-wrapper
		.block-editor-block-list__layout.is-root-container
		&.wp-block {
		margin-top: $margin;
		margin-bottom: $margin;
	}
}

// Default blocks vertical margins for the front
@mixin frontDefaultMargins($margin: $default-blocks-vertical-margin) {
	margin-top: $margin;
	margin-bottom: $margin;
}

// Get breakpoints css vars with default value
@mixin breakpointsCssVars(
	$varName,
	$defaultValue,
	$breakpoints: $grid-breakpoints
) {
	@each $breakpointName, $breakpoint in $breakpoints {
		--wp-beer-blocks-#{$varName}-#{$breakpointName}: #{$defaultValue};
	}
}

// Get typography rules for custom breakpoint
@mixin typographyRules(
	$blockName,
	$breakpointName: "",
	$attrPrefix: "",
	$defaultValues: $defaultTypographyValues
) {
	$fontSizeVarName: --wp-beer-blocks-#{$blockName}-#{camelize(
			"#{$attrPrefix}-font-size"
		)};
	$lineHeightVarName: --wp-beer-blocks-#{$blockName}-#{camelize(
			"#{$attrPrefix}-line-height"
		)};

	@if $breakpointName == "" or $breakpointName == "xs" {
		font-size: var(
			#{$fontSizeVarName},
			map.get($defaultValues, fontSize)
		) !important;
		line-height: var(
			#{$lineHeightVarName},
			map.get($defaultValues, lineHeight)
		) !important;
	} @else {
		font-size: var(
			#{$fontSizeVarName}-#{$breakpointName},
			map.get($defaultValues, fontSize)
		) !important;
		line-height: var(
			#{$lineHeightVarName}-#{$breakpointName},
			map.get($defaultValues, lineHeight)
		) !important;
	}
}

// Get headings typography rules for custom breakpoint
@mixin headersTypographyRules(
	$blockName,
	$breakpointName: "",
	$attrPrefix: "",
	$defaultValues: $headersDefaultTypographyValues
) {
	$fontSizeVarName: --wp-beer-blocks-#{$blockName}-#{camelize(
			"#{$attrPrefix}-font-size"
		)};
	$lineHeightVarName: --wp-beer-blocks-#{$blockName}-#{camelize(
			"#{$attrPrefix}-line-height"
		)};

	@each $header, $typographyValues in $defaultValues {
		#{$header}.wp-block-beer-blocks-#{$blockName} {
			@if $breakpointName == "" or $breakpointName == "xs" {
				font-size: var(
					#{$fontSizeVarName},
					map.get($typographyValues, fontSize)
				) !important;
				line-height: var(
					#{$lineHeightVarName},
					map.get($typographyValues, lineHeight)
				) !important;
			} @else {
				font-size: var(
					#{$fontSizeVarName}-#{$breakpointName},
					map.get($typographyValues, fontSize)
				) !important;
				line-height: var(
					#{$lineHeightVarName}-#{$breakpointName},
					map.get($typographyValues, lineHeight)
				) !important;
			}
		}
	}
}

// Get headings typography rules for all breakpoints
@mixin headersTypographyRulesAllBreakpoints(
	$blockName,
	$attrPrefix: "",
	$defaultValues: $headersDefaultTypographyValues,
	$breakpoints: $grid-breakpoints
) {
	@each $breakpointName, $breakpoint in $breakpoints {
		@if $breakpointName == "xs" {
			@include headersTypographyRules(
				$blockName,
				$breakpointName,
				$attrPrefix,
				$defaultValues
			);
		} @else {
			@include media-breakpoint-up($breakpointName) {
				@include headersTypographyRules(
					$blockName,
					$breakpointName,
					$attrPrefix,
					$defaultValues
				);
			}
		}
	}
}

// Get padding-{side} rules for custom breakpoint
@mixin paddingRules(
	$blockName,
	$breakpointName: "",
	$attrPrefix: "",
	$defaultValues: $defaultPaddingValues,
	$sides: $paddingSides
) {
	$varPrefix: --wp-beer-blocks-#{$blockName}-#{camelize(
			"#{$attrPrefix}-padding"
		)};

	@each $side in $sides {
		@if $breakpointName == "" or $breakpointName == "xs" {
			padding-#{$side}: var(
				#{$varPrefix + capitalize($side)},
				map.get($defaultValues, $side)
			) !important;
		} @else {
			padding-#{$side}: var(
				#{$varPrefix + capitalize($side)}-#{$breakpointName},
				map.get($defaultValues, $side)
			) !important;
		}
	}
}

// Get margin-{side} rules for custom breakpoint
@mixin marginRules(
	$blockName,
	$breakpointName: "",
	$attrPrefix: "",
	$defaultValues: $defaultMarginValues,
	$sides: $marginSides
) {
	$varPrefix: --wp-beer-blocks-#{$blockName}-#{camelize(
			"#{$attrPrefix}-margin"
		)};

	@each $side in $sides {
		@if $breakpointName == "" or $breakpointName == "xs" {
			margin-#{$side}: var(
				#{$varPrefix + capitalize($side)},
				map.get($defaultValues, $side)
			) !important;
		} @else {
			margin-#{$side}: var(
				#{$varPrefix + capitalize($side)}-#{$breakpointName},
				map.get($defaultValues, $side)
			) !important;
		}
	}
}

// Get vertical paddings rules for custom breakpoint
@mixin verticalPaddingRules(
	$blockName,
	$breakpointName: "",
	$attrPrefix: "",
	$defaultValues: $defaultPaddingValues
) {
	$varPrefix: --wp-beer-blocks-#{$blockName}-#{camelize(
			"#{$attrPrefix}-padding"
		)};

	@each $side in ("top", "bottom") {
		@if $breakpointName == "" or $breakpointName == "xs" {
			padding-#{$side}: var(
				#{$varPrefix + capitalize($side)},
				map.get($defaultValues, $side)
			) !important;
		} @else {
			padding-#{$side}: var(
				#{$varPrefix + capitalize($side)}-#{$breakpointName},
				map.get($defaultValues, $side)
			) !important;
		}
	}
}

@mixin widthRules(
	$blockName,
	$breakpointName: "",
	$attrPrefix: "",
	$defaultValue: 100%
) {
	$varName: --wp-beer-blocks-#{$blockName}-#{camelize("#{$attrPrefix}-width")};

	@if $breakpointName == "" or $breakpointName == "xs" {
		width: var(#{$varName}, $defaultValue) !important;
	} @else {
		width: var(#{$varName}-#{$breakpointName}, $defaultValue) !important;
	}
}

@mixin heightRules(
	$blockName,
	$breakpointName: "",
	$attrPrefix: "",
	$defaultValue: auto
) {
	$varName: --wp-beer-blocks-#{$blockName}-#{camelize("#{$attrPrefix}-height")};

	@if $breakpointName == "" or $breakpointName == "xs" {
		height: var(#{$varName}, $defaultValue) !important;
	} @else {
		height: var(#{$varName}-#{$breakpointName}, $defaultValue) !important;
	}
}

// Bootstrap 4 Reboot for editor view
@mixin reboot() {
	// Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
	// TODO: remove in v5
	// stylelint-disable-next-line selector-list-comma-newline-after

	article,
	aside,
	figcaption,
	figure,
	footer,
	header,
	hgroup,
	main,
	nav,
	section {
		display: block;
	}

	// Editor view typography and background
	//
	// 1. Remove the margins.
	// 2. Apply a default `background-color`.

	margin: 0; // 1
	@include font-size($font-size-base);
	font-family: $font-family-base;
	font-weight: $font-weight-base;
	line-height: $line-height-base;
	color: $body-color;
	background-color: $body-bg; // 2

	// Future-proof rule: in browsers that support :focus-visible, suppress the focus outline
	// on elements that programmatically receive focus but wouldn't normally show a visible
	// focus outline. In general, this would mean that the outline is only applied if the
	// interaction that led to the element receiving programmatic focus was a keyboard interaction,
	// or the browser has somehow determined that the user is primarily a keyboard user and/or
	// wants focus outlines to always be presented.
	//
	// See https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
	// and https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/

	[tabindex="-1"]:focus:not(:focus-visible) {
		outline: 0 !important;
	}

	// Content grouping
	//
	// 1. Add the correct box sizing in Firefox.
	// 2. Show the overflow in Edge and IE.

	hr {
		box-sizing: content-box; // 1
		height: 0; // 1
		overflow: visible; // 2
	}

	// Remove top margins from headings
	//
	// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
	// margin for easier control within type scales as it avoids margin collapsing.
	// stylelint-disable-next-line selector-list-comma-newline-after

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin-top: 0;
		margin-bottom: $headings-margin-bottom;
	}

	// Reset margins on paragraphs
	//
	// Similarly, the top margin on `<p>`s get reset. However, we also reset the
	// bottom margin to use `rem` units instead of `em`.

	p {
		margin-top: 0;
		margin-bottom: $paragraph-margin-bottom;
	}

	// Abbreviations
	//
	// 1. Duplicate behavior to the data-* attribute for our tooltip plugin
	// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
	// 3. Add explicit cursor to indicate changed behavior.
	// 4. Remove the bottom border in Firefox 39-.
	// 5. Prevent the text-decoration to be skipped.

	abbr[title],
	abbr[data-original-title] {
		// 1
		text-decoration: underline; // 2
		text-decoration: underline dotted; // 2
		cursor: help; // 3
		border-bottom: 0; // 4
		text-decoration-skip-ink: none; // 5
	}

	// Reset styles on address tag

	address {
		margin-bottom: 1rem;
		font-style: normal;
		line-height: inherit;
	}

	// Reset margins on lists

	ol,
	ul,
	dl {
		margin-top: 0;
		margin-bottom: 1rem;
	}

	// Reset margins on nested lists

	ol ol,
	ul ul,
	ol ul,
	ul ol {
		margin-bottom: 0;
	}

	// Set default font weight on description term tag

	dt {
		font-weight: $dt-font-weight;
	}

	// Reset margins in description details tag

	dd {
		margin-bottom: 0.5rem;
		margin-left: 0; // Undo browser default
	}

	// Reset margins on blockquote

	blockquote {
		margin: 0 0 1rem;
	}

	// Add the correct font weight in Chrome, Edge, and Safari

	b,
	strong {
		font-weight: $font-weight-bolder;
	}

	// Add the correct font size in all browsers

	small {
		@include font-size(80%);
	}

	//
	// Prevent `sub` and `sup` elements from affecting the line height in
	// all browsers.
	//

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

	sub {
		bottom: -0.25em;
	}

	sup {
		top: -0.5em;
	}

	//
	// Links
	//

	a {
		color: $link-color;
		text-decoration: $link-decoration;
		background-color: transparent; // Remove the gray background on active links in IE 10.

		@include hover() {
			color: $link-hover-color;
			text-decoration: $link-hover-decoration;
		}
	}

	// And undo these styles for placeholder links/named anchors (without href).
	// It would be more straightforward to just use a[href] in previous block, but that
	// causes specificity issues in many other styles that are too complex to fix.
	// See https://github.com/twbs/bootstrap/issues/19402

	a:not([href]):not([class]) {
		color: inherit;
		text-decoration: none;

		@include hover() {
			color: inherit;
			text-decoration: none;
		}
	}

	//
	// Code
	//

	pre,
	code,
	kbd,
	samp {
		font-family: $font-family-monospace;
		@include font-size(
			1em
		); // Correct the odd `em` font sizing in all browsers.
	}

	pre {
		// Remove browser default top margin
		margin-top: 0;
		// Reset browser default of `1em` to use `rem`s
		margin-bottom: 1rem;
		// Don't allow content to break outside
		overflow: auto;
		// Disable auto-hiding scrollbar in IE & legacy Edge to avoid overlap,
		// making it impossible to interact with the content
		-ms-overflow-style: scrollbar;
	}

	//
	// Figures
	//

	figure {
		// Apply a consistent margin strategy (matches our type styles).
		margin: 0 0 1rem;
	}

	// Images and content

	img {
		vertical-align: middle;
		border-style: none; // Remove the border on images inside links in IE 10-.
	}

	svg {
		// Workaround for the SVG overflow bug in IE10/11 is still required.
		// See https://github.com/twbs/bootstrap/issues/26878
		overflow: hidden;
		vertical-align: middle;
	}

	// Tables

	table {
		border-collapse: collapse; // Prevent double borders
	}

	caption {
		padding-top: $table-cell-padding;
		padding-bottom: $table-cell-padding;
		color: $table-caption-color;
		text-align: left;
		caption-side: bottom;
	}

	// 1. Removes font-weight bold by inheriting
	// 2. Matches default `<td>` alignment by inheriting `text-align`.
	// 3. Fix alignment for Safari

	th {
		font-weight: $table-th-font-weight; // 1
		text-align: inherit; // 2
		text-align: -webkit-match-parent; // 3
	}

	//
	// Correct element displays
	//

	output {
		display: inline-block;
	}

	summary {
		display: list-item; // Add the correct display in all browsers
		cursor: pointer;
	}

	template {
		display: none; // Add the correct display in IE
	}

	// Always hide an element with the `hidden` HTML attribute (from PureCSS).
	// Needed for proper display in IE 10-.
	[hidden] {
		display: none !important;
	}
}