@use 'sass:map';

// Theme settings ===========================================================================================

// Colors
:root {
	// Theme colors -- what ever you like
	--theme-backdrop: #dddddd;
	--theme-primary: #ff0000;
	--theme-accent: #0000ff;
	--theme-info: #6157cc;
	--theme-success: #65c147;
	--theme-warn: #d88750;
	--theme-danger: #bf4f4f;
	--theme-black: black;
	--theme-white: white;

	// Misc
	--theme-animation: 0.2s linear; // Animation style
	--theme-content-width: 1100px; // Max width of clamped content
	--theme-font: Arial, sans-serif;

	// Light theme
	&, .theme-light {
		--theme-clear: #ffffff; // Content background (Usually white or off-black)
		--theme-text: #000000; // Text color (Should contrast bg-primary)
		--theme-muted: #6c757d; // Muted text color (Should have less contrast against bg-primary)
	}

	// Dark theme
	.theme-dark {
		--theme-clear: #2e2e2e; // Content background (Usually white or off-black)
		--theme-text: #ffffff; // Text color (Should contrast bg-primary)
		--theme-muted: #cccccc; // Muted text color (Should have less contrast against bg-primary)
	}
}

$breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px); // Device size
$sizes: (0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5rem); // Padding/Margin, etc...

// Don't edit past this point ===============================================================================

$direction: ('s': 'left', 't': 'top', 'e': 'right', 'b': 'bottom');
$divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);

// "Fixes" ==================================================================================================

// Optional opinionated styling to clean up CSS defaults

.fix-anchor, .fix {
	a, a:not([href]) {
		color: var(--theme-primary);
		&:not(:hover) { text-decoration: none; }
		&:hover { text-decoration: underline; }
	}
}

.fix-button, .fix {
	button:not(:disabled) {
		cursor: pointer;
	}
}

.fix-code code, code.fix {
	display: block;
	white-space: pre;
	font-family: monospace;
	background: rgb(30, 30, 30);
	color: #00cb00;
	overflow: auto;
}

.fix-dom, .fix {
	&, html, body {
		height: 100%;
		width: 100%;
		margin: 0;
		padding: 0;
		overflow: auto;
		color: var(--theme-text);
		background-color: var(--theme-backdrop);
	}

	hr {
		border-bottom: 1px solid black;
		width: 100%;
		opacity: 50%;
	}
	* { box-sizing: border-box; }
}

.fix-focus, .fix {
	* {
		outline: none !important;
		box-shadow: none !important;
	}
}

.fix-font, .fix {
	* { font-family: var(--theme-font), sans-serif; }
	p, input, select, textarea, button { font-size: 1rem; }
	span { font-size: inherit; }
	h1, h2, h3, h4, h5, h6, p {
		margin-top: 0;
		margin-bottom: 0.5rem;
	}
	h1 { font-weight: 500; font-size: 2.5rem; }
	h2 { font-weight: 500; font-size: 2rem; }
	h3 { font-weight: 500; font-size: 1.75rem; }
	h4 { font-weight: 500; font-size: 1.5rem; }
	h5 { font-weight: 500; font-size: 1.25rem; }
	h6 { font-weight: 500; font-size: 1rem; }
}

option { color: black !important; }

// Misc =====================================================================================================

// Center
.center {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

// Clamp (Restrict page width for large screens)
.clamp { width: min(var(--theme-content-width), calc(100% - map.get($sizes, 3))); }


// Utilities ================================================================================================

// Anchor
.anchor-c { transform: translate(-50%, -50%); }
.anchor-e { transform: translate(-100%, -50%); }
.anchor-s { transform: translate(0, -50%); }

// Animate
.animate { transition: var(--theme-animation); }
.animate-none { transition: none !important; }
.animate-color {
	transition: var(--theme-animation);
	transition-property: color, background-color;
}
.animate-opacity {
	transition: var(--theme-animation);
	transition-property: opacity;
}
.animate-pos {
	transition: var(--theme-animation);
	transition-property: height, width, left, right, top, bottom;
}
.animate-trans {
	transition: var(--theme-animation);
	transition-property: transform;
}

// Border - Radius
.br-circle { border-radius: 50% !important; }
.br-pill { border-radius: 50rem !important; }
@each $s, $size in $sizes {
	.brtl-#{$s}, .brt-#{$s}, .brs-#{$s}, .br-#{$s} { border-top-left-radius: $size !important; }
	.brtr-#{$s}, .brt-#{$s}, .bre-#{$s}, .br-#{$s} { border-top-right-radius: $size !important; }
	.brbl-#{$s}, .brb-#{$s}, .brs-#{$s}, .br-#{$s} { border-bottom-left-radius: $size !important; }
	.brbr-#{$s}, .brb-#{$s}, .bre-#{$s}, .br-#{$s} { border-bottom-right-radius: $size !important; }
}

// Colors - Background
.bg-backdrop { background-color: var(--theme-backdrop) !important; }
.bg-black { background-color: var(--theme-black) !important; }
.bg-white { background-color: var(--theme-white) !important; }
.bg-transparent { background-color: transparent !important; }
.bg-clear {
	background-color: var(--theme-clear) !important;
	color: var(--theme-text) !important;
}
@each $color in ('primary', 'accent', 'text', 'info', 'success', 'warn', 'danger', 'muted') {
	.bg-#{$color} {
		position: relative;
		z-index: 1;
	}
	.bg-#{$color}::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: var(--theme-#{$color});
		filter: saturate(.5) brightness(150%);
		border-radius: inherit;
		z-index: -1;
	}
}

// Colors - Foreground
@each $color in ('black', 'clear', 'white', 'text', 'primary', 'accent', 'info', 'success', 'warn', 'danger', 'muted') {
	.fg-#{$color} { color: var(--theme-#{$color}) !important; }
}

// Cursors
@each $name in ('alias','auto','cell','col-resize','copy','crosshair','default','grab','grabbing','help','move','not-allowed','pointer','progress','row-resize','text','none','wait','vertical-text','zoom-in','zoom-out') {
	.curs-#{$name} { cursor: #{$name} !important; }
}

// Font
.fs-bolder { font-weight: bolder !important; }
.fs-bold { font-weight: 500 !important; }
.fs-normal { font-weight: normal !important; }
.fs-italic { font-style: italic !important; }
.fs-none { font-style: normal !important; }
.fs-lighter { font-weight: lighter !important; }
.fs-line-through { text-decoration: line-through !important; }
.fs-no-dec { text-decoration: none !important; }
.fs-underline { text-decoration: underline !important; }
.fs-7 { font-size: 2.5rem !important; }
.fs-6 { font-size: 2.25rem !important; }
.fs-5 { font-size: 2rem !important; }
.fs-4 { font-size: 1.75rem !important; }
.fs-3 { font-size: 1.5rem !important; }
.fs-2 { font-size: 1.25rem !important; }
.fs-1 { font-size: 1rem !important; }
.fs-break {
	word-wrap: break-word !important;
	word-break: break-word !important;
}
.fs-truncate {
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}
.fs-nowrap {
	white-space: nowrap !important;
	text-wrap: nowrap !important;
}
.fs-wrap {
	white-space: normal !important;
	text-wrap: pretty !important;
}
.fs-lowercase { text-transform: lowercase !important; }
.fs-uppercase { text-transform: uppercase !important; }
.fs-capitalize { text-transform: capitalize !important; }

// Height
.h-auto { height: auto !important; }
@each $div in $divisible {
	.h-#{$div} { height: #{$div}#{'%'} !important; }
}

// Hover
.curs-hover:hover, .hover:hover { filter: brightness(125%) !important; }
.curs-hover:hover {
	cursor: pointer;
	user-select: none;
}

// Opacity
@each $div in $divisible {
	.o-#{$div} { opacity: #{$div}#{'%'} !important; }
}

// Overflow
@each $opt in ('auto', 'hidden', 'scroll', 'visible') {
	.overflow-#{$opt} { overflow: #{$opt} !important; }
	.overflow-x-#{$opt} { overflow-x: #{$opt} !important; }
	.overflow-y-#{$opt} { overflow-y: #{$opt} !important; }
}

// Position
@each $p, $pos in ('abs': 'absolute', 'fix': 'fixed', 'rel': 'relative', 'static': 'static', 'stick': 'sticky') {
	.pos-#{$p} { position: #{$pos} !important; }
}

@each $div in $divisible {
	.bottom-#{$div} { bottom: #{$div}#{'%'} !important; }
	.end-#{$div} { right: #{$div}#{'%'} !important; }
	.start-#{$div} { left: #{$div}#{'%'} !important; }
	.top-#{$div} { top: #{$div}#{'%'} !important; }
}

// Shadows
.shadow { box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 !important; }
.shadow-drop { filter: drop-shadow(0px 1px 2.5px black) !important; }
.shadow-white { filter: drop-shadow(0px 1px 2.5px white) !important; }
.shadow-none { box-shadow: none !important; }

// User Select
@each $s in ('all', 'auto', 'none', 'text') {
	.select-#{$s} { user-select: #{$s} !important; }
}

// Width
.w-auto { width: auto !important; }
@each $div in $divisible {
	.w-#{$div} { width: #{$div}#{'%'} !important; }
}

// Z-index
@each $s, $ignore in $sizes {
	.z-#{$s} { z-index: #{$s} !important; }
}

// Breakpoint rules
@mixin utilities($bp) {
	@if $bp != null { $bp: '-#{$bp}'; }

	// Alignment
	.align-x#{$bp} { text-align: center !important; }
	.align-x#{$bp}-start { text-align: left !important; }
	.align-x#{$bp}-end { text-align: right !important; }
	.align-y#{$bp} { vertical-align: middle !important; }
	.align-y#{$bp}-start { vertical-align: top !important; }
	.align-y#{$bp}-end { vertical-align: bottom !important; }

	// Display
	@each $display in (block, inline, inline-block, 'flex', 'inline-flex' grid, inline-grid, table, table-row, table-cell, none) {
		.d#{$bp}-#{$display} { display: #{$display} !important; }
	}

	// Flex
	.align-content#{$bp}-start { align-content: start !important; }
	.align-content#{$bp}-end { align-content: end !important; }
	.align-content#{$bp}-center { align-content: center !important; }
	.align-content#{$bp}-baseline { align-content: baseline !important; }
	.align-content#{$bp}-stretch { align-content: stretch !important; }
	.align-items#{$bp}-start { align-items: start !important; }
	.align-items#{$bp}-end { align-items: end !important; }
	.align-items#{$bp}-center { align-items: center !important; }
	.align-items#{$bp}-baseline { align-items: baseline !important; }
	.align-items#{$bp}-stretch { align-items: stretch !important; }
	.align-self#{$bp}-start { align-self: start !important; }
	.align-self#{$bp}-end { align-self: end !important; }
	.align-self#{$bp}-center { align-self: center !important; }
	.align-self#{$bp}-baseline { align-self: baseline !important; }
	.align-self#{$bp}-stretch { align-self: stretch !important; }
	.flex#{$bp}-c {
		display: flex !important;
		flex-direction: column !important;
	}
	.flex#{$bp}-cr {
		display: flex !important;
		flex-direction: column-reverse !important;
	}
	.flex#{$bp}-r {
		display: flex !important;
		flex-direction: row !important;
	}
	.flex#{$bp}-rr {
		display: flex !important;
		flex-direction: row-reverse !important;
	}
	.flex-inline#{$bp}-c {
		display: inline-flex !important;
		flex-direction: column !important;
	}
	.flex-inline#{$bp}-cr {
		display: inline-flex !important;
		flex-direction: column-reverse !important;
	}
	.flex-inline#{$bp}-r {
		display: inline-flex !important;
		flex-direction: row !important;
	}
	.flex-inline#{$bp}-rr {
		display: inline-flex !important;
		flex-direction: row-reverse !important;
	}
	.flex#{$bp}-fill { flex: 1 1 auto; }
	.flex#{$bp}-fill-even {
		flex-basis: 0 !important;
		flex-grow: 1 !important;
	}
	.flex#{$bp}-grow-0 { flex-grow: 0 !important; }
	.flex#{$bp}-shrink-0 { flex-shrink: 0 !important; }
	.flex#{$bp}-grow-1 { flex-grow: 1 !important; }
	.flex#{$bp}-shrink-1 { flex-shrink: 1 !important; }
	.flex#{$bp}-grow-2 { flex-grow: 2 !important; }
	.flex#{$bp}-shrink-2 { flex-shrink: 2 !important; }
	.flex#{$bp}-grow-3 { flex-grow: 3 !important; }
	.flex#{$bp}-shrink-3 { flex-shrink: 3 !important; }
	.flex#{$bp}-nowrap { flex-wrap: nowrap !important; }
	.flex#{$bp}-wrap { flex-wrap: wrap !important; }
	.justify#{$bp}-start { justify-content: start !important; }
	.justify#{$bp}-end { justify-content: end !important; }
	.justify#{$bp}-center { justify-content: center !important; }
	.justify#{$bp}-between { justify-content: space-between !important; }
	.justify#{$bp}-around { justify-content: space-around !important; }
	.justify#{$bp}-evenly { justify-content: space-evenly !important; }

	// Float
	@each $f, $float in ('start': 'left', 'end': 'right', 'none': 'none') {
		.float#{$bp}-#{$f} { float: #{$float} !important; }
	}

	// Object Fit
	.fit#{$bp}-contain { object-fit: contain !important; }
	.fit#{$bp}-cover { object-fit: cover !important; }
	.fit#{$bp}-fill { object-fit: fill !important; }
	.fit#{$bp}-scale { object-fit: scale-down !important; }
	.fit#{$bp}-none { object-fit: none !important; }

	.m#{$bp}-auto { margin: auto !important; } // Margin
	.mx#{$bp}-auto { // Margin
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.my#{$bp}-auto { // Margin
		margin-top: auto !important;
		margin-bottom: auto !important;
	}

	// Visibility
	.visible#{$bp} {  visibility: visible !important; }
	.hidden#{$bp} {  visibility: hidden !important; }

	@each $s, $size in $sizes {
		.b#{$bp}-#{$s} { border: #{$s}px solid var(--theme-muted) !important; } // Border
		.m#{$bp}-#{$s} { margin: $size !important; } // Margin
		.p#{$bp}-#{$s} { padding: $size !important; } // Padding
		.mx#{$bp}-#{$s} { // Margin
			margin-left: $size !important;
			margin-right: $size !important;
		}
		.px#{$bp}-#{$s} { // Padding
			padding-left: $size !important;
			padding-right: $size !important;
		}
		.my#{$bp}-#{$s} { // Margin
			margin-top: $size !important;
			margin-bottom: $size !important;
		}
		.py#{$bp}-#{$s} { // Padding
			padding-top: $size !important;
			padding-bottom: $size !important;
		}

		.order#{$bp}-#{$s} { order: $s !important; } // Flex order
	}

	@each $d, $dir in $direction {
		.m#{$d}#{$bp}-auto { margin-#{$dir}: auto !important; } // Margin

		@each $s, $size in $sizes {
			.b#{$d}#{$bp}-#{$s} { border-#{$dir}: #{$s}px solid var(--theme-muted) !important; } // Border
			.m#{$d}#{$bp}-#{$s} { margin-#{$dir}: $size !important; } // Margin
			.p#{$d}#{$bp}-#{$s} { padding-#{$dir}: $size !important; } // Padding
		}
	}
}

@include utilities(null);
@media print { @include utilities('print'); }
@each $breakpoint, $min-width in $breakpoints {
	@media (min-width: #{$min-width}) {
		@include utilities($breakpoint);
	}
}

// Border - Colors
@each $color in ('black', 'white', 'primary', 'accent', 'info', 'success', 'text', 'warn', 'danger', 'muted') {
	.b-#{$color} { border-color: var(--theme-#{$color}) !important; }
}

// Border - Style
.b-dash { border-style: dashed !important; }
.b-dot-dash { border-style: dot-dash !important; }
.b-dot-dot-dash { border-style: dot-dot-dash !important; }
.b-dot { border-style: dotted !important; }
.b-double { border-style: double !important; }
.b-none { border-style: none !important; }
.b-solid { border-style: solid !important; }