/* #region BASE */
:root {
	--glass-effect: blur(20px);
}

button,
input {
	&[type='reset'],
	&[type='submit'] {
		appearance: none;
		border-radius: 0;
		border: 0;
		display: inline-block;
		font-family: var(--wp--preset--font-family--bebas-neue);
		font-size: 15px;
		font-weight: 700;
		height: 53px;
		letter-spacing: .5px;
		line-height: 53px;
		min-width: 140px;
		padding: 0 21px;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		transition: background .3s ease-in-out, border-color .3s ease-in-out, color .3s ease-in-out;
		user-select: none;
		vertical-align: middle;

		@media (hover: hover) {
			&:hover {
				cursor: pointer;

				&:disabled {
					cursor: default;
				}
			}
		}

		&:disabled {
			opacity: .6;
		}
	}

	&[type='reset'] {
		background: var(--wp--preset--color--clouded-vision);
		border-color: var(--wp--preset--color--clouded-vision);
		color: var(--wp--preset--color--stone-cold);

		@media (hover: hover) {
			&:hover {
				background: var(--wp--preset--color--stone-cold);
				border-color: var(--wp--preset--color--stone-cold);
				color: white;
			}
		}

		&:active,
		&:focus {
			background-color: var(--wp--preset--color--clouded-vision);
			border-color: var(--wp--preset--color--clouded-vision);
			color: var(--wp--preset--color--stone-cold);
		}
	}

	&[type='submit'] {
		background: var(--wp--preset--color--bitcoin);
		border-color: var(--wp--preset--color--bitcoin);
		color: var(--wp--preset--color--interstellar-blue);

		@media (hover: hover) {
			&:hover {
				background: var(--wp--preset--color--baroque);
				border-color: var(--wp--preset--color--baroque);
				color: var(--wp--preset--color--interstellar-blue);

				&:disabled {
					background: var(--wp--preset--color--bitcoin);
					border-color: var(--wp--preset--color--bitcoin);
					color: var(--wp--preset--color--interstellar-blue);
				}
			}
		}

		&:active,
		&:focus {
			background-color: var(--wp--preset--color--bitcoin);
			border-color: var(--wp--preset--color--bitcoin);
			color: var(--wp--preset--color--interstellar-blue);
		}
	}
}

label,
legend {
	color: var(--wp--preset--color--french-blue);
	display: block;
	font-family: var(--wp--preset--font-family--bebas-neue);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: .5px;
	line-height: 27px;
	margin-bottom: 5px;
	text-transform: uppercase;
}

a {
	text-decoration: none;
}

body {
	background-color: var(--wp--preset--color--interstellar-blue);
	color: var(--wp--preset--color--stone-cold);

	&.buddypress,
	&.page-template-opaque {
		@media (width >= 992px) {
			padding-top: 80px;
		}

		@media (width <= 991px) {
			padding-top: 55px;
		}
	}
}

fieldset {
	border: 0;
	padding: 0;

	&:not(:first-of-type) {
		margin-top: 25px;
	}
}

hr {
	border-bottom: 0;
	border-left: 0;
	border-right: 0;
	border-style: solid;
}

input {
	&[type='date'],
	&[type='email'],
	&[type='number'],
	&[type='password'],
	&[type='search'],
	&[type='tel'],
	&[type='text'],
	&[type='url'] {
		appearance: none;
		background-color: white;
		border: 1px solid var(--wp--preset--color--pixel-white);
		border-radius: 2px;
		color: var(--wp--preset--color--stone-cold);
		font-size: 12px;
		height: 43px;
		line-height: 43px;
		padding: 0 18px;

		&:focus {
			border-color: var(--wp--preset--color--spritzig);
		}

		&::placeholder {
			color: var(--wp--preset--color--brainstem-grey);
		}
	}

	&[type='checkbox'],
	&[type='radio'] {
		accent-color: var(--wp--preset--color--atlantic-depths);
		position: relative;
		top: 1px;
	}
}

label {
	user-select: none;

	span {
		color: var(--wp--preset--color--stone-cold);
		font-family: var(--wp--preset--font-family--arial);
		font-size: calc(var(--wp--preset--font-size--normal) * .875);
		font-weight: normal;
		letter-spacing: normal;
		text-transform: none;
	}
}

select {
	appearance: none;
	background-position: calc(100% - 20px) -4px;
	background-repeat: no-repeat;
	background-size: 9px auto;
	border-radius: 2px;
	border-style: solid;
	border-width: 1px;
	font-size: 12px;
	height: 43px;
	line-height: 43px;
	padding: 0 18px;
	position: relative;
	top: 1px;
	user-select: none;
	z-index: 5;

	&.light {
		background-color: white;
		background-image: url('../img/select-light.png');
		border-color: var(--wp--preset--color--pixel-white);
		color: var(--wp--preset--color--stone-cold);
	}

	&.dark {
		background-color: var(--wp--preset--color--lynx-white);
		background-image: url('../img/select-dark.png');
		border-color: var(--wp--preset--color--inky-violet);
		color: var(--wp--preset--color--interstellar-blue);
	}
}

textarea {
	appearance: none;
	background-color: white;
	border-radius: 2px;
	border: 1px solid var(--wp--preset--color--pixel-white);
	color: var(--wp--preset--color--stone-cold);
	field-sizing: content;
	font-size: 12px;
	line-height: 18px;
	min-height: 4lh;
	padding: 10px;
	resize: none;

	&:focus {
		border-color: var(--wp--preset--color--spritzig);
	}
}
/* #endregion */

/* #region 404 */
.error404 .wp-site-blocks {
	background-image: url('../img/splash.webp');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 100vh;
	position: relative;
	width: 100vw;

	.wp-block-columns {
		left: 50%;
		padding: 0;
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
	}
}
/* #endregion */

/* #region ADMIN BAR */
#wp-admin-bar-aioseo-main,
#wp-admin-bar-bp-notifications,
#wp-admin-bar-new-content,
#wp-admin-bar-search,
#wp-admin-bar-wp-logo {
	display: none;
}

.admin-bar > .wp-site-blocks > header > nav {
	@media (width >= 783px) {
		top: 32px !important;
	}

	@media (width <= 782px) {
		top: 45px !important;
	}
}

#wpadminbar {
	@media (width <= 782px) {
		position: fixed;
	}
}
/* #endregion */

/* #region BLOCK EDITOR */
.has-h-1-font-size,
.has-h-2-font-size,
.has-h-3-font-size,
.has-h-4-font-size,
.has-h-5-font-size {
	line-height: 1;
}

.has-paragraph-font-size,
p {
	line-height: 1.5;
}

p {
	font-size: var(--wp--preset--font-size--paragraph);
}

.has-text-align-center {
	text-align: center;
}

.wp-block-button {
	user-select: none;

	&.is-style-yellow .wp-block-button__link {
		&:disabled {
			background: var(--wp--preset--color--bitcoin);
			color: var(--wp--preset--color--interstellar-blue);
			opacity: .6;
		}
	}

	.wp-block-button__link {
		transition: background .3s ease-in-out, border-color .3s ease-in-out, color .3s ease-in-out;
	}
}
/* #endregion */

/* #region BP PROFILE SEARCH */
.bps-form {
	/* #region VARIABLES */
	--input-gap: 30px;
	/* #endregion */

	> div:not(:first-of-type) {
		margin-top: 50px;
	}

	.bps-checkbox,
	.bps-radio {
		display: flex;
		flex-flow: row wrap;
		align-items: center;
		gap: 10px var(--input-gap);

		h2,
		label {
			margin-bottom: 0;
		}

		h2 {
			flex: 1 1 100%;
		}

		label {
			@media (width >= 783px) {
				flex: 1 1 calc(33.3333333333% - var(--input-gap));
				max-width: calc(33.3333333333% - var(--input-gap));
			}

			@media (width <= 782px) {
				flex: 1 1 100%;
			}
		}
	}

	button[type='reset'] {
		margin-left: 15px;
	}

	h2 {
		border-bottom: 3px solid var(--wp--preset--color--springtime-rain);
		color: var(--wp--preset--color--interstellar-blue);
		margin: 0 0 15px 0;
		padding-bottom: 5px;
	}

	input {
		&[type='checkbox'],
		&[type='radio'] {
			margin-left: 0;
			margin-right: 4px;
		}

		&[type='search'] {
			@media (width >= 783px) {
				max-width: 400px;
				width: 100% !important;
			}

			@media (width <= 782px) {
				width: 85% !important;
			}
		}
	}

	select {
		@media (width >= 783px) {
			max-width: 350px;
			width: 100% !important;
		}

		@media (width <= 782px) {
			width: 85% !important;
		}
	}
}
/* #endregion */

/* #region CONTENT */
.entry-content {
	background-color: var(--wp--preset--color--whiteout);
	margin-top: 0;
}

.wp-block-columns {
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	max-width: var(--wp--style--global--content-size);
	width: 100%;

	@media (width >= 782px) {
		padding: 80px 50px;
	}

	@media (width <= 781px) {
		padding: 41px 27px;
	}
}
/* #endregion */

/* #region SITEWIDE NOTICE */
#sitewide-notice {
	display: none;
}
/* #endregion */

/* #region BROWSER OVERRIDES */
.ua-safari {
	input {
		&[type="checkbox"],
		&[type="radio"] {
			top: -1px !important;
		}
	}
}
/* #endregion */