@use "sass:map";
@import "../../../node_modules/@guyn/color/dist/colors.scss";

@function contra($color, $black: black, $white: white) {
	@if lightness($color) > 60 {
		@return $black;
	} @else {
		@return $white;
	}
}
@function to-lightness($color, $lightness) {
	@return hsla(hue($color), saturation($color), $lightness, alpha($color));
}

$small-width: 750px;
$medium-width: 750px;
$large-width: 1680px;

$small: "screen and (max-width: #{$medium-width - 1})";
$medium: "screen and (min-width: #{$medium-width})";
$large: "screen and (min-width: #{$large-width})";

$color-primary: $skyblue !default;
$color-secondary: $orange !default;
$color-dark: $dark-dark !default;
$color-light: to-lightness($gray, 98) !default;
$color-white: white !default;
$color-black: black !default;
$border-radius: 0.5em !default;
$transition-time: 0.25s !default;
$transition-bezier: cubic-bezier(0.15, 0.65, 0.65, 1.25) !default;
$transition: #{$transition-time} #{$transition-bezier};
$max-width: 960px;
$base-space: 2em !default;

$coat: () !default;

$coat-default: (
	// Colors
		color-primary: $color-primary,
	color-secondary: $color-secondary,
	color-primary-contra: contra($color-primary),
	color-secondary-contra: contra($color-secondary),
	color-dark: $color-dark,
	color-light: $color-light,
	color-white: $color-white,
	color-black: $color-black,
	// Basics
		padding: $base-space,
	padding--mobile: $base-space/2 $base-space,
	margin: $base-space/2,
	transition-time: $transition-time,
	transition-bezier: $transition-bezier,
	transition: $transition,
	background-color: $color-white,
	max-width: $max-width,
	border-radius: $border-radius,
	border-color: $color-light,
	border-width: 1px,
	border: 1px solid $color-light,
	font-family:
		"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', 'sans-serif'",
	color: $color-dark,
	// Body
		// 	body__padding: $base-space,
		// body__padding--mobile: $base-space/2 $base-space,
		body__color: $color-dark,
	// Heading
		heading-step: 0.5,
	heading__font-family: inherit,
	// Content Links
		link__color: to-lightness($color-primary, 33),
	link__color--hover: $color-primary,
	link__padding: 0.25em 0.125em,
	link__background-color--hover: $color-black,
	link__text-decoration: none,
	link__line-height: 1,
	link__box-shadow: 0 -2px 0 0px rgba($color-primary, 0.25) inset,
	link-preview__background-color: to-lightness($color-primary, 90),
	link-preview__color: to-lightness($color-primary, 20),
	link-preview__padding: 0.25em 0.5em,
	link-preview__border-radius: $border-radius,
	link-preview__font-size: 0.75em,
	// List
		list-prefix__border-radius: 0,
	list-prefix__background-color: transparent,
	list-prefix__width: auto,
	list-prefix__color: to-lightness($color-primary, 30),
	// Code Examples
		code__font-family:
		"Menlo, 'Consolas', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace",
	code__color: to-lightness($color-primary, 15),
	code__font-size: 1em,
	code__selection: $color-primary,
	code__line-height: 1,
	code__border-color: $color-light,
	code__padding: 0.5em,
	code__background-color: to-lightness($color-primary, 90),
	code__border-radius: $border-radius,
	// Code Block
		code-block__font-family:
		"Menlo, 'Consolas', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace",
	code-block__color: $color-dark,
	code-block__font-size: 1em,
	code-block__selection: $color-primary,
	code-block__line-height: 2,
	code-block__border-color: $color-light,
	code-block__padding: 0.5em 1em,
	code-block__background-color: $color-light,
	code-block__border-radius: $border-radius,
	// Tables
		table__border-radius: 0.2em,
	table__background-color: transparent,
	table__color: currentColor,
	table__border: 1px solid $color-light,
	table-cell__padding: 0.5em 1em,
	// Link
		standard-nav-link__color: $color-dark,
	standard-nav-link__font-size: 1em,
	standard-nav-link__text-decoration: none,
	standard-nav-link__z-index: 1,
	standard-nav-link__position: relative,
	standard-nav-link__color--hover: to-lightness($color-primary, 20),
	standard-nav-link__color--active: to-lightness($color-primary, 20),
	standard-nav-link__background-color--before: to-lightness($color-primary, 95),
	standard-nav-link__background-color--before-hover:
		to-lightness($color-primary, 95),
	standard-nav-link__background-color--before-active:
		to-lightness($color-primary, 90),
	standard-nav-link__content--before: " ",
	standard-nav-link__position--before: absolute,
	standard-nav-link__top--before: 50%,
	standard-nav-link__left--before: 50%,
	standard-nav-link__display--before: block,
	standard-nav-link__z-index--before: -1,
	standard-nav-link__width--before: 100%,
	standard-nav-link__height--before: 100%,
	standard-nav-link__opacity--before-hover: 1,
	standard-nav-link__opacity--before-active: 1,
	standard-nav-link__opacity--before: 0,
	standard-nav-link__transition--before: all $transition,
	standard-nav-link__transform--before: translate(-50%, -50%) scale(0.5),
	standard-nav-link__transform--before-hover: translate(-50%, -50%) scale(1),
	standard-nav-link__transform--before-active: translate(-50%, -50%) scale(1),
	standard-nav-link__padding: 0.5em 1em,
	standard-nav-link__border-radius--before: $border-radius,
	standard-nav-link-sub__opacity: 0.66,
	standard-nav-link-sub__font-size: 0.9em,
	standard-nav-link-sub__opacity--hover: 1,
	standard-nav-link-sub__opacity--active: 1,
	standard-nav-link-sub__border-radius: $border-radius,
	standard-nav-link-sub__color--hover: to-lightness($color-primary, 20),
	standard-nav-link-sub__color--active: to-lightness($color-primary, 20),
	standard-nav-link-sub__background-color--before-hover:
		to-lightness($color-primary, 90),
	standard-nav-link-sub__background-color--before-active:
		to-lightness($color-primary, 90),
	// Footer navigation
		footer-nav__border: 1px 0 0 0 solid rgba($color-black, 0.25),
	footer-nav__margin: 0,
	footer-nav__max-width: 100vw,
	footer-nav__padding: $base-space * 2 $base-space $base-space $base-space,
	footer-nav__border-radius: $border-radius,
	footer-nav__border-radius-mobile: $border-radius,
	footer-nav__padding--mobile: $base-space,
	footer-nav__background-color: transparent,
	footer-nav__background-color--mobile: $color-light,
	// Sidebar navigation
		sidebar-nav__border-radius: $border-radius,
	sidebar-nav__padding--desktop: 1em,
	// Sidebar navigation
		footnote__border: 1px 0 0 0 solid $color-dark,
	footnote__opacity: 0.5,
	footnote__font-size: 0.85em,
	footnote__text-align: center,
	footnote__color: currentColor,
	footnote__padding: 2em,
	// Main section
		main__padding: $base-space,
	main__padding--mobile: $base-space,
	// Overview section
		overview__max-width: 75ch,
	overview__width: 100%,
	overview__margin: auto 0 auto,
	overview__padding: $base-space,
	overview-time__display: block,
	overview-time__opacity: 0.5,
	overview-time__font-size: 0.75em,
	overview-time__font-weight: bold,
	overview-time__line-height--desktop: 4,
	overview-list__padding: 0,
	overview-item__padding: 0,
	overview-link__margin--desktop: 0 0 0 1em,
	overview-link__margin--mobile: 0,
	// Overview section
		article__max-width: 75ch,
	article__margin: 4em auto 0 auto,
	article__font-size: 1em,
	article__font-size--mobile: 1.25em,
	article__padding: $base-space auto,
	article-paragraph__line-height: 1.75,
	article-paragraph__font-size--first: 1.25em,
	article-paragraph__line-height--first: 1.5,
	article-title__font-size: 4em,
	article-title__font-size--mobile: $base-space,
	// Mobile
		mobile-nav__background-color: rgba(0, 0, 0, 0.25),
	mobile-nav__padding: $base-space,
	mobile-nav-list__background-color: $color-white,
	mobile-nav-list__padding: $base-space,
	mobile-nav-list__border-radius: 0.5em,
	// Alert
		alert__padding: 1em,
	alert__border-radius: $border-radius,
	alert__color: $color-dark,
	alert__background-color: $color-light,
	alert__color--error: #{to-lightness($red, 12.5)},
	alert__background-color--error: #{to-lightness($red, 90)},
	alert__color--warning: #{to-lightness($orange, 12.5)},
	alert__background-color--warning: #{to-lightness($orange, 90)},
	alert__color--danger: #{to-lightness($yellow, 12.5)},
	alert__background-color--danger: #{to-lightness($yellow, 90)},
	alert__color--tip: #{to-lightness($blue, 12.5)},
	alert__background-color--tip: #{to-lightness($blue, 90)},
	alert__color--success: #{to-lightness($green, 12.5)},
	alert__background-color--success: #{to-lightness($green, 90)},
	alert__color--info: #{to-lightness($skyblue, 12.5)},
	alert__background-color--info: #{to-lightness($skyblue, 90)},
	// Blockquote
		blockquote__padding: $base-space/2,
	blockquote__font-size: 1em,
	blockquote__font-style: italic,
	blockquote__opacity: 0.66,
	// Trigger
		trigger__background-color: $color-white,
	trigger__background-color--hover: #{to-lightness($skyblue, 90)},
	trigger__color: #{to-lightness($skyblue, 12.5)},
	trigger__border-radius: $border-radius,
	trigger__box-shadow: 0 0.2em 0.25em 0 #{to-lightness($color-primary, 90)},
	trigger__width: 2.5em,
	trigger__height: 2.5em,
	trigger__top--sidebar: 1em,
	trigger__left--sidebar: 1em,
	trigger__top--header: 1em,
	trigger__right--header: 1em,
	// Header
		header__display--mobile: flex,
	header__padding: $base-space,
	header__padding--mobile: $base-space / 2,
	header__max-width: 100vw,
	header-title__text-align: left,
	// Blog
		blog-meta__margin-top: 2em,
	blog-meta__background-color: $color-light,
	blog-meta__border-radius: $border-radius,
	blog-meta__padding: $base-space/2,
	blog-meta__display: flex,
	blog-meta__justify-content: space-between,
	blog-tags__display: flex,
	blog-tags__flex-wrap: wrap,
	blog-tags__justify-content: center,
	blog-tags__justify-content--with-author: flex-end,
	blog-tags__margin: 0,
	blog-tag__background-color: #{to-lightness($color-primary, 90)},
	blog-tag__padding: $base-space/4 $base-space/2,
	blog-tag__line-height: 1,
	blog-tag__font-size: 0.85em,
	blog-tag__color: #{to-lightness($color-primary, 20)},
	blog-tag__border-radius: 1.5em,
	blog-tag__margin: 0.2em,
	blog-tag__color--before: #{to-lightness($color-primary, 70)},
	blog-author__line-height: 1,
	// Search
		search__height: 3em,
	search__position: relative,
	search__position--before: absolute,
	search__background-color: transparent,
	search__right--before: 0.75em,
	search__bottom--before: 0.75em,
	search__width--before: 0.5em,
	search__height--before: 2px,
	search__transition--before: transform $transition,
	search__background-color--before: #{to-lightness($color-primary, 50)},
	search__transform--before-focus: translateY(150%) translateX(150%)
		rotate(45deg),
	search__transform--before: translateY(-100%) translateX(0) rotate(45deg),
	// search__transform-origin--before: 100% 100%,
		search-input__position: relative,
	search-input__width: 1em,
	search-input__background-color: transparent,
	search-input__width--focus: 10em,
	search-input__height: 1em,
	search-input__height--focus: 2em,
	search-input__padding: 0 0em,
	search-input__padding--focus: 0 1em,
	search-input__right: 0,
	search-input__border: 2px solid #{to-lightness($color-primary, 50)},
	search-input__border--focus: 2px solid #{to-lightness($color-primary, 80)},
	search-input__border-radius: 1em,
	search-input__transition: all $transition,
	search-label__display: inline-flex,
	search-label__align-items: center,
	search-label__justify-content: center,
	search-label__min-width: 3em,
	search-label__height: 3em,
	search-results__position: absolute,
	search-results__background-color: $color-white,
	search-results__top: 100%,
	search-results__right: 0,
	search-results__margin: 0,
	search-results__opacity: 0.5,
	search-results__opacity--focus: 1,
	search-results__border: 2px solid #{to-lightness($color-primary, 80)},
	search-results__border-radius: $border-radius,
	search-results__transform: scale(0),
	search-results__animation: popOut $transition forwards,
	search-results__animation--focus: popIn $transition forwards,
	search-result__min-width: 10em,
	search-result__padding: 1em,
	search-result__max-width: $small-width,
	// Sections
		section__padding: $base-space 0,
	// section__margin-left--desktop: -$base-space,
		section__width--desktop: calc(100% + (#{$base-space} * 2)),
	section__width--mobile: 100%,
	section-column__padding: $base-space,
	section-container__max-width: $max-width,
	section-container__margin: auto
) !default;

$coat-settings: map.merge($coat-default, $coat);

@mixin setCustomProperty($setting) {
	:root {
		--coat-#{$setting}: #{map-get($coat, $setting)};
	}
}
// Function: coat-setting-exists
// Check if a Key exists in the settings
@function coat-setting-exists($setting) {
	@if map-get($coat-settings, $setting) {
		@return true;
	}
	@return false;
}
// Function: coat
// Get the value of a certain key in the settings and convert it to
// a custom property with default value or if empty just the custom property.
@function coat($setting, $prop: "", $modifier: "") {
	@if $prop != "" {
		$prop: "__#{$prop}";
	}
	@if $modifier != "" {
		$modifier: "--#{$prop}";
	}

	$key: #{$setting}#{$prop}#{$modifier};

	@if coat-setting-exists($key) {
		$value: map-get($coat-settings, $key);
		@if (str-index($key, "font-family")) {
			@return #{$value};
		} @else {
			@return unquote("var(--coat-#{$key},#{$value})");
		}
	}
	@return unquote("var(--coat-#{$setting})");
}
// Mixin: coat
// Get the setting value and check if it exists. If it exists, add the property.

@mixin coat($setting, $prop: "", $modifier: "") {
	$prop-partial: "";
	$modifier-partial: "";
	@if $prop != "" {
		$prop-partial: "__#{$prop}";
	}
	@if $modifier != "" {
		$modifier-partial: "--#{$modifier}";
	}

	$key: #{$setting}#{$prop-partial}#{$modifier-partial};

	// @debug "#{$key} ::: #{coat-setting-exists($key)} :: #{coat($key)}";
	@if coat-setting-exists($key) {
		#{$prop}: coat($key);
	}
}

// Mixin: coats
// List functionality for `mixin coat`. To do multiple properties at a time.
@mixin coats($props, $setting, $modifier: "") {
	@each $prop in $props {
		@include coat($setting, $prop, $modifier);
	}
}

// Is the modifier correct?
@function modifier-is($setting, $modifier) {
	@if $modifier == "" {
		@if str-index($setting, "--") {
			@return false;
		}
		@return true;
	}
	@if str-index($setting, "--#{$modifier}") {
		@return true;
	} @else {
		@return false;
	}
}
// Get the property from a string.
@function get-prop($setting) {
	@if str-index($setting, "__") {
		$start: str-index($setting, "__");
		$end: str-length($setting);
		@if str-index($setting, "--") {
			$end: str-index($setting, "--") - 1;
		}
		@return str-slice($setting, $start + 2, $end);
	} @else {
		@return null;
	}
}

// Mixin Coat-Auto
// Automatically find all properties link to a key and use them.
@mixin coat-auto($setting, $modifier: "") {
	@each $setting-key, $setting-value in $coat-settings {
		@if modifier-is($setting-key, $modifier) and
			str-index($setting-key, $setting + "__") ==
			1
		{
			$prop: get-prop($setting-key);

			@if $prop != null or $prop != "" and $setting-value {
				#{$prop}: coat($setting-key);
			}
		}
	}
}

@mixin coat-auto-responsive($setting, $modifier: "") {
	@include coat-auto($setting, $modifier);
	$mod: "";
	@if $modifier != "" {
		$mod: unquote(#{$mod}-);
	}
	@media #{$small} {
		@include coat-auto($setting, #{$mod}mobile);
	}
	@media #{$medium} {
		@include coat-auto($setting, #{$mod}desktop);
	}
}