_ui.scss

/*! 
* Spry UI
*/
.btn,
button,
input,
textarea,
select,
.alert,
nav>a,
.toolbar,
nav li>a {
	position       : relative;
	appearance     : none;
	color          : inherit;
	background     : transparent;
	min-height     : 2.3em;
	min-width      : 2.3em;
	height         : auto;
	padding        : 0 1em;
	width          : 100%;
	display        : inline-flex;
	align-items    : center;
	text-decoration: none;
	outline        : none;
	vertical-align : middle;
	border         : 0;
	font-size      : 100%;
}

button {
	width: auto;
}

input,
textarea,
select {

	&:hover,
	&:focus {
		border-color: var(--spry-accent-color);
	}

	&:focus {
		box-shadow: inset 0 0 0 1px var(--spry-accent-color);
	}
}

input,
textarea,
select,
a,
button {
	outline: none;

	&:focus-visible:not(:hover) {
		outline       : 2px solid rgba(140, 140, 140, 0.25);
		outline-offset: 2px;
	}
}

label.btn:has(:focus-visible) {
	outline       : 2px solid rgba(140, 140, 140, 0.25);
	outline-offset: 2px;
}

.btn-menu input[type="checkbox"] {
	outline: none;
}

input[type="checkbox"],
input[type="radio"] {
	&:focus-visible:not(:hover) {
		outline-width: 4px;
	}
}

.btn,
input,
textarea,
select,
.alert,
article,
.list li>a,
.list li>button {
	border         : 1px solid map-get($colors, 'medium');
	border-radius  : 3px;
	justify-content: center;
}

a:not(.btn),
.btn,
input,
textarea,
select,
.alert,
.list li>a,
.list li>button {
	transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, filter .2s ease-in-out;
}

.btn,
input,
textarea,
select,
.list li>a,
.list li>button {
	::placeholder {
		color: #999;
	}

	&:disabled {
		opacity: .6;
		cursor : not-allowed;
	}
}

.alert {
	justify-content: flex-start;
	margin-bottom  : 1rem;
	padding        : .5em 1em;

	svg {
		min-width: 1em;
	}

}

a,
.btn,
button,
input,
textarea,
select,
form {

	&:disabled,
	&.disabled {
		opacity       : .6;
		pointer-events: none;
	}
}

input[type="checkbox"],
input[type="radio"] {
	width         : 1rem;
	min-height    : 1rem;
	padding       : 0;
	margin        : 0 .6rem 0 .4rem;
	position      : relative;
	min-width     : 0;
	vertical-align: text-bottom;

	&:checked {
		border-color: var(--spry-accent-color);

		&::after {
			content         : '';
			position        : absolute;
			inset           : 2px;
			background-color: var(--spry-accent-color);
			border-radius   : 2px;
		}
	}
}

input[type="radio"] {

	&,
	&:checked::after {
		border-radius: 50%;
	}
}

form.disabled,
form:disabled {

	input,
	select,
	textarea,
	label,
	button {
		pointer-events: none;
		opacity       : 0.8;
	}
}

.toggle {
	cursor: pointer;

	input[type="checkbox"] {
		appearance: none;
		border    : 0;
	}

	&:not(.btn-menu) input[type="checkbox"] {
		opacity: 0;
		width  : 0;
		height : 0;

		&::after {
			display: none;
		}
	}
}

.toggle+*,
nav>ul>li>ul {
	max-height      : 1px;
	opacity         : 0;
	pointer-events  : none;
	position        : relative;
	transform       : scaleY(.8) translateY(-4px);
	transform-origin: top;
	transition      : transform .1s ease-in-out, opacity .05s ease-in-out, max-height .3s cubic-bezier(0, 1, 0, 1); // Out
	transition-delay: .1s;
	z-index         : 1;
}

.toggle.has-checked+* {
	max-height    : 100vh;
	opacity       : 1;
	pointer-events: all;
	transform     : scaleY(1.000001);
}

.toggle:has(:checked)+*,
.toggle.hoverable:hover+*,
.toggle+.open,
.hoverable>ul>li:hover>ul,
nav li>ul:focus-within {
	max-height    : 100vh;
	opacity       : 1;
	pointer-events: all;
	transform     : scaleY(1.000001);
}

@each $breakpoint,
$breakpoint_width in $breakpoints {
	@media screen and (min-width: $breakpoint_width) {

		.toggle.#{$breakpoint}-hoverable:hover+*,
		.toggle+.#{$breakpoint}-open,
		.#{$breakpoint}-hoverable>ul>li:hover>ul {
			max-height    : 100vh;
			opacity       : 1;
			pointer-events: all;
			transform     : scaleY(1.000001);
		}
	}
}

.btn,
input[type="submit"] {
	background-color: var(--spry-btn-color);
	border-color    : var(--spry-btn-color);
}

a:not(.btn),
.btn,
a.btn,
a.btn:hover,
a.btn:focus,
input[type="submit"] {

	&:hover:not(:active),
	&:focus:not(:active),
	&:focus-within:not(:active) {
		filter: brightness(1.15);
	}
}

.btn,
.list li>a,
.list li>button,
input[type="submit"] {
	cursor        : pointer;
	text-align    : center;
	text-transform: uppercase;
	width         : auto;
}


.btn svg,
.list li>a svg,
.list li>button svg {
	width : 1.5em;
	height: 1.5em;
}

.btn-outline,
.btn-link,
.btn-hazy,
.list li>a,
.list li>button {
	background-color: transparent;

	&:active,
	&:focus,
	&:focus-within,
	&:hover {
		background-color: rgba(var(--spry-btn-color-rgb), 0.1);
	}
}

.btn.btn-hazy,
a.btn.btn-hazy {
	background-color: rgba(var(--spry-btn-color-rgb), 0.1);

	&:hover:not(:active),
	&:focus:not(:active),
	&:focus-within:not(:active) {
		background-color: rgba(var(--spry-btn-color-rgb), 0.2);
	}
}

.btn-link:not(.btn-outline),
.btn-hazy:not(.btn-outline),
.list li>a,
.list li>button {
	border-color: transparent;
}

.btn-link,
.list li>a,
.list li>button {
	text-transform: capitalize;
}

nav {
	ul {
		min-width: 200px;
	}

	li {
		position: relative;
		width   : 100%;
		display : block;
		border  : 0;

		>.btn-toggle::after {
			border-width: 1.7px;
		}
	}

	&.horizontal {
		position: relative;

		>ul {
			display  : flex;
			flex-wrap: wrap;
		}

		>a,
		>ul>li {

			display    : inline-flex;
			align-items: center;
			width      : auto;

			>.btn-toggle {
				position      : relative;
				pointer-events: none;
				top           : auto;
				transform     : translateY(0);
			}

			>ul {
				position : absolute;
				top      : 100%;
				max-width: 300px;
			}
		}
	}

	@each $breakpoint,
	$breakpoint_width in $breakpoints {
		@media screen and (min-width: $breakpoint_width) {
			&.#{$breakpoint}-horizontal {
				position: relative;

				>ul {
					display  : flex;
					flex-wrap: wrap;
				}

				>a,
				>ul>li {

					display    : inline-flex;
					align-items: center;
					width      : auto;

					>.btn-toggle {
						position      : relative;
						pointer-events: none;
						top           : auto;
						transform     : translateY(0);
					}

					>ul {
						position : absolute;
						top      : 100%;
						min-width: 220px;
						max-width: 300px;
					}
				}
			}
		}
	}

	&.list {

		&,
		>a,
		>button,
		li>a,
		li>button {
			width          : 100%;
			text-align     : left;
			justify-content: flex-start;
		}

		>a,
		>button,
		li>a,
		li>button {
			padding-top   : 0.5rem;
			padding-bottom: 0.5rem;
			border        : 0;
		}
	}

	li>a,
	li>button,
	.list li>button,
	.list li>a {
		line-height: 1.2;

		&.truncate {
			display: block;
		}
	}

	li.sm>a,
	li.xs>a {
		padding-right: 2rem;
	}
}



.btn-menu {
	position: relative;
	padding : 0;

	input {
		background-color: var(--spry-btn-color-text);
		width           : 1.5em;
		position        : absolute;
		border          : 0;
		min-height      : auto;
		pointer-events  : none;

		&,
		&::before,
		&::after {
			border-radius: 3px;
			bottom       : 0;
			color        : transparent;
			display      : block;
			height       : 2px;
			margin       : auto;
			inset        : 0;
			transition   : transform .15s ease-in-out;
		}

		&::before,
		&::after {
			content         : '';
			position        : absolute;
			transform       : translateY(-.4em);
			background-color: inherit;
			width           : 100%;
		}

		&::after {
			transform: translateY(.4em);
		}

		&:focus {
			box-shadow: none;
		}
	}

	&.btn-link,
	&.btn-hazy,
	&.btn-outline {
		input {
			background-color: var(--spry-btn-color);
		}
	}
}

.btn-menu.has-checked {
	input {
		transform: rotate(45deg);

		&::before,
		&::after {
			transform: rotate(0deg);
		}

		&::after {
			transform       : rotate(-90deg);
			background-color: inherit;
			inset           : 0;
		}
	}
}

.btn-menu:has(:checked) {
	input {
		transform: rotate(45deg);

		&::before,
		&::after {
			transform: rotate(0deg);
		}

		&::after {
			transform       : rotate(-90deg);
			background-color: inherit;
			inset           : 0;
		}
	}
}

.btn-up,
.btn-right,
.btn-down,
.btn-left,
.btn-toggle {
	padding: 0;

	input {
		border        : 0;
		pointer-events: none;
		opacity       : 0;
		width         : 0;
		height        : 0;
	}

	&::after {
		content      : '';
		display      : block;
		position     : absolute;
		inset        : 0;
		margin       : auto;
		border       : 2px solid var(--spry-btn-color-text);
		border-left  : 0;
		border-bottom: 0;
		width        : .7em;
		height       : .7em;
		transition   : transform .2s ease-in-out;
		transform    : rotate(135deg) translate(-14%, 16%);
	}

	&.btn-link,
	&.btn-hazy,
	&.btn-outline {
		&::after {
			border-color: var(--spry-btn-color);
		}
	}

	nav li>& {
		position : absolute;
		right    : .5em;
		top      : .25em;
		font-size: 80%;
	}
}

.btn-up::after {
	transform: rotate(315deg) translate(-14%, 16%);
}

.btn-right::after {
	transform: rotate(45deg) translate(-14%, 16%);
}

.btn-left::after {
	transform: rotate(225deg) translate(-14%, 16%);
}

.btn-close {
	padding: 0;

	&::before,
	&::after {
		background-color: var(--spry-btn-color-text);
		content         : '';
		height          : 60%;
		position        : absolute;
		inset           : 0;
		margin          : auto;
		width           : 2px;
	}

	&::before {
		transform: rotate(45deg);
	}

	&::after {
		transform: rotate(-45deg);
	}

	&.btn-link,
	&.btn-hazy,
	&.btn-outline {

		&::before,
		&::after {
			background-color: var(--spry-btn-color);
		}
	}
}

.btn-close,
.btn-menu,
.btn-toggle,
.btn-down,
.btn-up,
.btn-left,
.btn-right {

	&.text-right input,
	&.text-right::before,
	&.text-right::after {
		right: auto;
		left : 18px;
	}

	&.text-left input,
	&.text-left::before,
	&.text-left::after {
		right: 18px;
		left : auto;
	}
}

.toggle.has-checked.btn-toggle::after,
.btn-toggle.has-checked::after {
	transform: rotate(-45deg) translate(-14%, 16%);
}

.toggle:has(:checked).btn-toggle::after,
.btn-toggle:has(:checked)::after {
	transform: rotate(-45deg) translate(-14%, 16%);
}

select {
	background-image     : url("data:image/svg+xml;utf8,<svg fill='gray' xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
	background-repeat    : no-repeat;
	background-position-x: 95%;
	background-position-y: 52%;
	line-height          : 2.1em;
	padding-right        : 1.7em;

	option {
		background: #eee;
		color     : #333;
	}

	@media (prefers-color-scheme: dark) {
		option {
			background: #333;
			color     : #eee;
		}
	}
}

textarea {
	min-height : 8em;
	max-height : 500px;
	padding    : .75rem;
	max-width  : 100%;
	min-width  : 100%;
	line-height: 1.2;
}

label {
	position: relative;
	display : block;

	sup,
	sub {
		position        : absolute;
		transform       : translate(10px, -50%);
		top             : 50%;
		transition      : all .2s ease-in-out;
		transform-origin: left;
		animation       : none;
		opacity         : 0.7;
	}

	&.has-textarea {

		sup,
		sub {
			top: 19px;
		}
	}

	&:has(textarea) {

		sup,
		sub {
			top: 19px;
		}
	}

	&:focus-within,
	&.active {

		sup,
		sub {
			transform  : translate(3px, -50%) scale(0.85);
			top        : -12px;
			opacity    : .8;
			font-weight: 500;
		}

		sub {
			top: calc(100% + 11px);
		}
	}

	&:focus-within sup,
	&:focus-within sub {
		color    : var(--spry-accent-color);
		animation: all .2s forwards ease;
	}

	&.has-sup {
		margin-top: 1rem;
	}

	&.has-sub {
		margin-bottom: 1rem;
	}

	&:has(sup) {
		margin-top: 1rem;
	}

	&:has(sub) {
		margin-bottom: 1rem;
	}
}

@keyframes labll {
	0% {
		opacity: 1,
	}

	50% {
		opacity: .4;
	}

	100% {
		opacity: .8;
	}
}

@keyframes spinner {
	0% {
		transform: rotate(0deg)
	}

	90%,
	100% {
		transform: rotate(360deg)
	}
}

.loader {
	position: relative;

	&::after {
		content       : '';
		box-sizing    : border-box;
		position      : absolute;
		inset         : 0;
		margin        : auto;
		width         : 1.3em;
		height        : 1.3em;
		border-radius : 50%;
		border        : 2px solid transparent;
		border-color  : var(--spry-accent-color) var(--spry-accent-color) transparent transparent;
		opacity       : 0;
		pointer-events: none;
		transition    : opacity .3s ease-in-out .1s;
	}

	&.loading {
		pointer-events       : none;
		user-select          : none;
		cursor               : default;
		--spry-btn-color-text: transparent;
		color                : transparent;

		&::after {
			opacity  : 1;
			animation: spinner .8s ease infinite;
		}
	}
}

.btn.loader::after {
	border-color: white white transparent transparent;
}

table {
	width          : 100%;
	margin-top     : 1rem;
	border-collapse: collapse;

	td,
	th {
		padding   : .6rem .2rem;
		text-align: left;
	}

	thead th {
		font-weight: 500;
	}

	tbody tr {
		&:hover td {
			background-color: rgba(map-get($colors, 'primary'), .04);
		}

		td {
			border-top: 1px solid map-get($colors, 'light');
		}

		&:first-child td {
			border-color: darken(map-get($colors, 'light'), 10%);
		}
	}
}

hr {
	height          : 1px;
	border          : 0;
	background-color: map-get($colors, 'medium');
	margin          : map-get($gaps, 'default');
}

section {
	padding: (map-get($gaps, 'default') * 2) map-get($gaps, 'default');
}

@each $breakpoint,
$breakpoint_width in $breakpoints {
	@if map-get($gaps, $breakpoint) {
		@media screen and (min-width: $breakpoint_width) {
			hr {
				margin: map-get($gaps, $breakpoint);
			}

			section {
				padding: (map-get($gaps, $breakpoint) * 2) map-get($gaps, $breakpoint);
			}
		}
	}
}

@each $color_name,
$color_value in $colors {
	section.bg-#{$color_name}+section.bg-#{$color_name} {
		padding-top: 0;
	}
}

article {
	background-color: map-get($colors, 'white');
	border-color    : var(--spry-accent-color);
	display         : flex;
	flex-direction  : column;
	align-items     : flex-start;
	justify-content : flex-start;
	gap             : 2em;
	overflow        : hidden;
	padding         : 2em;
	position        : relative;

	&:has(>header),
	&:has(>footer) {
		padding: 0;

		>header,
		>footer,
		>p,
		>div {
			padding-left : 2rem;
			padding-right: 2rem;
		}
	}

	>header,
	>footer {
		background-color: var(--spry-accent-color);
		color           : var(--spry-accent-color-text);
		display         : flex;
		align-items     : center;
		padding-top     : 1em;
		padding-bottom  : 1em;
	}

	>footer {
		margin-top: auto;
	}

	>header,
	>footer,
	>div,
	>p,
	>h1,
	>h2,
	>h3,
	>h4,
	>h5,
	>h6 {
		width: 100%;
	}
}

.has-tooltip {
	position: relative;

	&:hover {
		z-index: 2;
	}

	.tooltip {
		width     : 90vw;
		position  : absolute;
		transition: opacity .2s ease-in-out;
		cursor    : auto;
	}

	&:not(:hover) .tooltip {
		opacity       : 0;
		pointer-events: none;
	}
}

:has(>.tooltip) {
	position: relative;

	&:hover {
		z-index: 2;
	}

	.tooltip {
		width     : 90vw;
		position  : absolute;
		transition: opacity .2s ease-in-out;
		cursor    : auto;
	}

	&:not(:hover) .tooltip {
		opacity       : 0;
		pointer-events: none;
	}
}