@import 'base/_variables.css';
@import 'base/_reset.css';
@import 'base/_fonts.css';
@import 'base/_utility.css';
@import 'components/_card.css';
@import 'components/_spellbook.css';
/* @import 'components/_photoswipe.css'; */

@import 'card-builder.css';

/* Gradient border animation */
@property --angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

@keyframes rotateGradient {
	to { --angle: 360deg; }
}

body {
	--wp-admin--admin-bar--height: 0px;

	&.admin-bar {
		--wp-admin--admin-bar--height: 32px;
	
		@media screen and (max-width: 782px) {
			--wp-admin--admin-bar--height: 46px;
		}
	}

	background-color: transparent;
	color: rgb(var(--clr-gray-0) / 1);
	font-family: var(--font-fam-body);
	font-size: var(--font-size-base);
	line-height: var(--line-height-body);

	&::before,
	&::after {
		content: "";
		display: block;
		inset-inline: 0;
	}

	&::before {
		inset-block: 0;
		position: fixed;
		z-index: -2;
		background-color: rgb(var(--clr-primary-400) / 1);
	}

	&::after {
		position: absolute;
		z-index: -1;
		height: 100vh;
		top: 0;
		background: var(--clr-primary-gradient);
	}
}

body * {
	--body-scrollbar-color-track: transparent;
	--body-scrollbar-color-thumb: rgb(var(--clr-gray-0) / var(--opacity-4));
	scrollbar-color: var(--body-scrollbar-color-thumb) var(--body-scrollbar-color-track);
	scrollbar-width: thin;

	*:hover {
		--body-scrollbar-color-thumb: rgb(var(--clr-gray-0) / var(--opacity-5));
	}

	*:active {
		--body-scrollbar-color-thumb: rgb(var(--clr-gray-0) / var(--opacity-6));
	}
}

body *:focus,
body *:target {
	outline: 3px solid rgb(var(--clr-primary-300) / 1);
	outline-offset: .125rem;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
	font-family: var(--font-fam-heading);
	line-height: var(--line-height-heading);
	text-transform: uppercase;
}

h1, .h1 {
	font-size: var(--font-size-h1);
}

h2, .h2 {
	font-size: var(--font-size-h2);
}

h3, .h3 {
	font-size: var(--font-size-h3);
}

h4, .h4 {
	font-size: var(--font-size-h4);
}

h5, .h5 {
	font-size: var(--font-size-h5);
}

h6, .h6 {
	font-size: var(--font-size-h6);
}

small,
.small {
	font-size: var(--font-size-small);
}

.caption {
	font-size: var(--font-size-small);
	color: rgba(255 255 255 / var(--opacity-6));
	font-style: italic;
	line-height: var(--line-height-small);
}

label {
	cursor: pointer;
}

/* Icons overwrite */
.icon-forward.back {
	transform: rotate(-180deg);
}


/* 
 * Inputs and buttons 
 */

/* Layout */
button,
.btn,
.menu-item a,
.menu-item [data-nav-toggle],
.menu-item-primary > * {
	position: relative;
	isolation: isolate;
	cursor: pointer;
	padding-block: var(--spacer-2);
	padding-inline: var(--spacer-3);
	border-radius: var(--radius-2);
	font-size: var(--font-size-small);
	font-family: var(--font-fam-body);
	border-width: var(--border-width);
	border-style: var(--border-style);

	.btn-label {
		font-family: var(--font-fam-body);
	}

	&:has(.btn-label) {
		display: flex;
		align-items: center;
		gap: var(--spacer-1);
	}
}

/* Style */
button,
.btn,
.menu-item a,
.menu-item [data-nav-toggle] {
	background: var(--_btn-background);
	color: rgb(var(--clr-gray-0) / 1);
	border-color: var(--_btn-border-color);
}

.menu-item a:not([class*="-primary"]),
.menu-item [data-nav-toggle]:not([class*="-primary"]) {
	--_btn-border-color: transparent;
	--_btn-background: rgb(var(--clr-gray-0) / var(--opacity-1));

	&:hover {
		--_btn-background: rgb(var(--clr-gray-0) / var(--opacity-2));
		--_btn-border-color: var(--border-inner-color);
	}
	&:active {
		--_btn-background: rgb(var(--clr-gray-0) / var(--opacity-1));
		--_btn-border-color: var(--border-outer-color);
	}
}

button:not([class*="-primary"]),
.btn:not([class*="-primary"]) {
	--_btn-background: linear-gradient(var(--color-backdrop), var(--color-backdrop)) padding-box;
	--_btn-border-color: var(--border-outer-color);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--_btn-background);
	box-shadow: 0 0 16px rgba(255, 0, 111, 0.12), inset 0 0 20px rgba(131, 56, 236, .4);
	transition: 0.2s;
}

button:not([class*="-primary"]),
.btn:not([class*="-primary"]) {
	&:hover {
		--_btn-border-color: rgb(var(--clr-gray-0) / var(--opacity-4));
		--_btn-background: rgb(var(--clr-primary-900) / 1);
	}
	&:active {
		--_btn-border-color: rgb(var(--clr-gray-0) / var(--opacity-5));
		--_btn-bg-color: rgb(var(--clr-primary-900) / 1);
	}
}

.menu-item[class*="icon-"] .btn {
	justify-content: flex-start;
}

.btn.btn-primary,
.menu-item-primary > * {
	--_btn-border-color: transparent;

	box-shadow: 0 0 16px rgba(255, 0, 111, 0.12), inset 0 0 20px rgba(131, 56, 236, .4);

	&:hover {
		--_gradient-animation-duration: 2s;

		box-shadow: 0 0 32px rgba(255, 0, 110, 0.12), inset 0 0 20px rgba(131, 56, 236, .16);
	}

	&:focus {
		outline: none;
	}

	&:active {
		outline: none;
		scale: .99;
		box-shadow: 0 0 8px rgba(255, 0, 110, 0.1), inset 0 0 20px rgb(var(--clr-primary-900) / var(--opacity-5));
	}
}

.btn,
.btn.btn-large,
.menu-item-primary > * {
	&[class*="icon"]:not(:has(.btn-label)) {
		aspect-ratio: 1 / 1;
		width: 48px;
		padding-inline: var(--spacer-2);
	}
}

.btn-small {
	aspect-ratio: unset !important;
}


/* 
 * Gradient animation 
 */

/* Animation setup */
.btn.btn-primary,
[class*="element-"],
.menu-item-primary > * {
	--_gradient-animation-duration: 4s;

	background: linear-gradient(var(--color-backdrop), var(--color-backdrop)) padding-box, 
					conic-gradient(from calc(var(--angle) + 0deg), var(--clr-gradient-array)) border-box, 
					conic-gradient(from calc(var(--angle) + 90deg), transparent 0%, #8338ec 25%, transparent 50%, #3a86ff 75%, transparent 100%) border-box !important;
					
	&:hover {
		--_gradient-animation-duration: 2s;

		scale: 1.01;
		animation: rotateGradient var(--_gradient-animation-duration) linear infinite;
		transition: 0.2s;
		box-shadow: 0 0 32px rgba(255, 0, 110, 0.12), inset 0 0 20px rgba(131, 56, 236, .16);
	}

	&:focus {
		outline: none;
	}

	&:active {
		outline: none;
		scale: .99;
		box-shadow: 0 0 8px rgba(255, 0, 110, 0.1), inset 0 0 20px rgb(var(--clr-primary-900) / var(--opacity-5));
	}
}

/* Elements */
.btn.btn-primary,
.menu-item-primary > * {
	--clr-gradient-array: var(--clr-gradient-primary-array);
}

.element-air {
	--clr-gradient-array: var(--clr-gradient-element-air-array);

	&.element-fire {
		--clr-gradient-array: var(--clr-gradient-element-air-array), var(--clr-gradient-element-fire-array), var(--clr-gradient-element-air-array);
	}
	&.element-water {
		--clr-gradient-array: var(--clr-gradient-element-air-array), var(--clr-gradient-element-water-array), var(--clr-gradient-element-air-array);
	}
	&.element-earth {
		--clr-gradient-array: var(--clr-gradient-element-air-array), var(--clr-gradient-element-earth-array), var(--clr-gradient-element-air-array);
	}
	&.element-neutral {
		--clr-gradient-array: var(--clr-gradient-element-air-array), var(--clr-gradient-element-neutral-array), var(--clr-gradient-element-air-array);
	}
}
.element-fire {
	--clr-gradient-array: var(--clr-gradient-element-fire-array);

	&.element-air {
		--clr-gradient-array: var(--clr-gradient-element-fire-array), var(--clr-gradient-element-air-array), var(--clr-gradient-element-fire-array);
	}
	&.element-water {
		--clr-gradient-array: var(--clr-gradient-element-fire-array), var(--clr-gradient-element-water-array), var(--clr-gradient-element-fire-array);
	}
	&.element-earth {
		--clr-gradient-array: var(--clr-gradient-element-fire-array), var(--clr-gradient-element-earth-array), var(--clr-gradient-element-fire-array);
	}
	&.element-neutral {
		--clr-gradient-array: var(--clr-gradient-element-earth-array), var(--clr-gradient-element-neutral-array), var(--clr-gradient-element-earth-array);
	}
}
.element-water {
	--clr-gradient-array: var(--clr-gradient-element-water-array);

	&.element-air {
		--clr-gradient-array: var(--clr-gradient-element-water-array), var(--clr-gradient-element-air-array), var(--clr-gradient-element-water-array);
	}
	&.element-fire {
		--clr-gradient-array: var(--clr-gradient-element-water-array), var(--clr-gradient-element-fire-array), var(--clr-gradient-element-water-array);
	}
	&.element-earth {
		--clr-gradient-array: var(--clr-gradient-element-water-array), var(--clr-gradient-element-earth-array), var(--clr-gradient-element-water-array);
	}
	&.element-neutral {
		--clr-gradient-array: var(--clr-gradient-element-earth-array), var(--clr-gradient-element-neutral-array), var(--clr-gradient-element-earth-array);
	}
}
.element-earth {
	--clr-gradient-array: var(--clr-gradient-element-earth-array);

	&.element-air {
		--clr-gradient-array: var(--clr-gradient-element-earth-array), var(--clr-gradient-element-air-array), var(--clr-gradient-element-earth-array);
	}
	&.element-fire {
		--clr-gradient-array: var(--clr-gradient-element-earth-array), var(--clr-gradient-element-fire-array), var(--clr-gradient-element-earth-array);
	}
	&.element-water {
		--clr-gradient-array: var(--clr-gradient-element-earth-array), var(--clr-gradient-element-water-array), var(--clr-gradient-element-earth-array);
	}
	&.element-neutral {
		--clr-gradient-array: var(--clr-gradient-element-earth-array), var(--clr-gradient-element-neutral-array), var(--clr-gradient-element-earth-array);
	}
}
.element-neutral {
	--clr-gradient-array: var(--clr-gradient-element-neutral-array);

	&.element-air {
		--clr-gradient-array: var(--clr-gradient-element-neutral-array), var(--clr-gradient-element-air-array), var(--clr-gradient-element-neutral-array);
	}
	&.element-fire {
		--clr-gradient-array: var(--clr-gradient-element-neutral-array), var(--clr-gradient-element-fire-array), var(--clr-gradient-element-neutral-array);
	}
	&.element-water {
		--clr-gradient-array: var(--clr-gradient-element-neutral-array), var(--clr-gradient-element-water-array), var(--clr-gradient-element-neutral-array);
	}
	&.element-earth {
		--clr-gradient-array: var(--clr-gradient-element-neutral-array), var(--clr-gradient-element-earth-array), var(--clr-gradient-element-neutral-array);
	}
}

.graphic-element {
	position: relative;
	z-index: 2;
	height: 24px;
	display: flex;
	gap: var(--spacer-2);

	img {
		max-width: 24px;
		width: 24px;
	}
}


/* 
 * Form elements 
 */
input[type],
select {
	--_input-padding-y: var(--spacer-2);
	--_input-padding-x: var(--spacer-3);
	--_input-radius: var(--radius-2);
	--_input-surface: var(--surface-2-color);
	--_input-border: var(--border-outer);
	--_input-color: rgb(var(--clr-gray-0), var(--opacity-5));

	padding: var(--_input-padding-y) var(--_input-padding-x);
	background-color: var(--_input-surface);
	border-radius: var(--_input-radius);
	border: var(--_input-border);
	color: var(--_input-color);
	transition: .2s ease-out;

	&:hover,
	&:focus {
		--_input-color: rgb(var(--clr-gray-0), 1);
		--_input-border: var(--border-inner);
	}

	&:focus {
		--_input-surface: var(--surface-4-color);
	}
}

/* Box */
.box {
	padding: var(--spacer-4);
	border-radius: var(--radius-3);
}

/* Notice */
.notice {
	--_notice-border-style: var(--border-outer-style);
	--_notice-border-color: var(--border-outer-color);
	--_notice-border-width: var(--border-outer-width);
	--_notice-padding: var(--spacer-3);
	--_notice-radius: var(--radius-2);
	--_notice-bg-color: var(--surface-3-color);

	margin-bottom: var(--spacer-3);
	padding: var(--_notice-padding);
	border-style: var(--_notice-border-style);
	border-color: var(--_notice-border-color);
	border-width: var(--_notice-border-width);
	border-radius: var(--_notice-radius);
	background-color: var(--_notice-bg-color);
	position: relative;
	display: flex;
	gap: var(--spacer-1);

	&.notice-success {
		--_notice-border-color: var(--color-success);
	}

	&.notice-error {
		--_notice-border-color: var(--color-error);
	}

	&::before {
		color: var(--_notice-border-color);
	}
	
	p {
		margin: 0;
		font-family: var(--font-fam-body);
	}
}


/* Hide fields based on type */
.card[data-type="amulet"] {
	.card-cost,
	.card-hero-requirement,
	.card-power,
	.card-power-max,
	.card-subtype-separator {
		display: none;
	}
}
.card[data-type="ailment"] {
	.card-hero-requirement,
	.card-power,
	.card-power-max,
	.card-subtype-separator {
		display: none;
	}
}
.card[data-type="entity"] {
	.card-power-max {
		display: none;
	}
}
.card[data-type="hero"] {
	.card-cost,
	.card-hero-requirement {
		display: none;
	}
}
.card[data-type="trick"] {
	.card-power,
	.card-power-max,
	.card-hero-requirement {
		display: none;
	}
}

/* Sidebar */
.sidebar {
	--_sidebar-toggle-rotation: 180deg;
	--_sidebar-spacer: var(--spacer-3);
	--_sidebar-toggle-height: 81px;

	position: fixed;
	z-index: 999;
	inset-block: 0;
	height: 100vh;
	padding-top: calc(var(--_sidebar-spacer) + var(--wp-admin--admin-bar--height));
	padding-bottom: var(--_sidebar-spacer);
	overflow: hidden;
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	transition: var(--_transform-transition);

	@media screen and (max-width: 782px) {
		&:not(.show) {
			transform: translateX(var(--_sidebar-transform));
		}
	}

	&.sidebar-left {
		--_sidebar-transform: -100%;
		left: 0;
		border-right: var(--border-outer);
		width: var(--_sidebar-width-left);

		@media screen and (min-width: 783px) {
			--_sidebar-transform: 0%;
		}

		&.expanded {
			--_sidebar-transform: 0%;
			--_sidebar-width-left: 320px;
			--_sidebar-toggle-rotation: 180deg;

			.menu-item:has([data-nav-toggle]) {
				&::before {
					transform: rotate(var(--_sidebar-toggle-rotation));
				}
			}
		}
	}

	&.sidebar-right {
		--_sidebar-transform: 100%;
		--_sidebar-toggle-rotation: 180deg;

		@media screen and (min-width: 783px) {
			--_sidebar-transform: 0%;
		}

		right: 0;
		width: var(--_sidebar-width-right);
		border-left: var(--border-outer);
		transform: translateX(var(--_sidebar-transform));

		.menu-item:has([data-nav-toggle]) {
			&::before {
				transform: rotate(var(--_sidebar-toggle-rotation));
			}
		}

		&.expanded {
			--_sidebar-transform: 0%;
			--_sidebar-toggle-rotation: 0deg;

			.menu-item:has([data-nav-toggle]) {
				&::before {
					transform: rotate(var(--_sidebar-toggle-rotation));
				}
			}
		}
	}

	&.expanded {
		--_transform-spacer: 12px;
		--_transform-indent: 36px;
	}

	.sidebar-transition-indent {
		transition: var(--_transform-transition);
		text-indent: var(--_transform-indent);
	}

	.sidebar-heading {
		border-bottom: var(--border-inner);
	}

	.menu-top {
		margin-bottom: auto;
		padding-top: var(--_sidebar-spacer);
		overflow-x: hidden;
		overflow-y: auto;
		padding-bottom: var(--_sidebar-toggle-height);
	}

	.menu-bottom {
		border-top: var(--border-inner);
		/* padding-top: var(--_sidebar-spacer); */
		
		height: var(--_sidebar-toggle-height);
		background-color: var(--surface-4-color);
		
		/* padding-bottom: var(--_sidebar-spacer); */
		position: fixed;
		width: 100%;
		bottom: 0;
		right: 0;
		z-index: 800;

		.menu-item {
			transform: translateY(25%);
		}
	}

	.brand {
		display: flex;
		align-items: center;
		margin-left: 24px;
		width: 32px;
		margin-bottom: var(--_sidebar-spacer);
		white-space: nowrap;
		color: rgb(var(--clr-gray-0) / 1);

		&::before {
			font-size: var(--font-size-h3);
		}

		.brand-text {
			transform: translateX(var(--_transform-spacer));
			transition: var(--_transform-transition);
			white-space: nowrap;
			margin-bottom: 0;
		}
	}

	ul.menu {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-flow: column;
		gap: var(--spacer-2);
	}

	.menu-item {
		position: relative;

		&::before {
			pointer-events: none;
			position: absolute;
			top: 16px;
			left: 32px;
			z-index: 1;
		}

		&.menu-item:has([data-nav-toggle])::before {
			transition: var(--_transform-transition);
		}

		&.current-menu-item > a {
			border-color: rgb(var(--clr-primary-300) / 1);
		}

		&.border-bottom {
			border-bottom: var(--border-inner);
			padding-bottom: var(--_sidebar-spacer);
			margin-bottom: calc(var(--_sidebar-spacer) - var(--spacer-2));
		}

		a,
		[data-nav-toggle] {
			display: flex;
			align-items: center;
			height: 48px;
			margin-inline: 14px;
			padding-inline: var(--_sidebar-spacer);
			white-space: nowrap;
			overflow: hidden;
			transition: var(--_transform-transition);
			text-indent: var(--_transform-indent);
		}
	}
}

/* Cards filter */
.filter {
	--_cards-filter-top: 0;

	position: fixed;
	z-index: 100;
	top: var(--_cards-filter-top);
	display: flex;
	gap: var(--spacer-2);
	inset-inline: 0;
	padding-inline: calc(var(--_sidebar-width) + var(--gap));
	padding-block: var(--spacer-2);
	border-bottom: var(--border-outer);
	max-width: 100%;
	overflow-x: auto;

	@media screen and (min-width: 600px) {
		--_cards-filter-top: var(--wp-admin--admin-bar--height);
	}

	label:has(input, select) {
		display: flex;
	}

	input,
	select {
		background-color: var(--surface-4-color);
		font-size: var(--font-size-tiny);
		flex-grow: 1;
	}
}


/* Items overview */
.items-overview-heading {
	margin-top: var(--gap);
	margin-bottom: 0;
}

.items-overview {
	--_card-min-width: 240px;

	container-type: inline-size;
  	container-name: items-overview;
	display: grid;
	padding-top: var(--spacer-5);
	grid-template-columns: repeat(auto-fill, minmax(var(--_card-min-width), 1fr));
	gap: var(--gap);



	@media screen and (max-width: 520px) {
		--_card-min-width: 160px;
	}

	&.filter-active .item-holder:not(:has(.included-in-search)) {
		display: none;
	}

	.card-holder {
		max-width: 320px;
	}
}


/* Page and containers */
#wrapper {
	--_mobile-nav-spacer: var(--spacer-2);

	--_transform-spacer: 40px;
	--_transform-indent: calc(var(--_transform-spacer) * 2);
	--_transform-transition: .4s cubic-bezier(.4, 0, 0, 1.16);

	--_sidebar-width-left: 81px; /* 80px + 1px border */
	--_sidebar-width-right: 0px; /* 80px + 1px border */
	--_wrapper-padding-inline-start: var(--gap);
	--_wrapper-padding-inline-end: var(--gap);
	--_wrapper-padding-block-start: var(--gap);
	--_wrapper-padding-block-end: var(--gap);

	padding-inline-start: var(--_wrapper-padding-inline-start);
	padding-inline-end: var(--_wrapper-padding-inline-end);
	padding-block-start: var(--_wrapper-padding-block-start);
	padding-block-end: var(--_wrapper-padding-block-end);
	min-height: calc(100vh - var(--wp-admin--admin-bar--height));
	transition: var(--_transform-transition);

	@media screen and (max-width: 782px) {
		--_wrapper-padding-block-end: calc((var(--_mobile-nav-spacer) * 2) + 80px + var(--spacer-2));
	}
	
	@media screen and (min-width: 783px) {
		--_wrapper-padding-inline-start: calc(var(--_sidebar-width-left) + var(--gap));
		--_wrapper-padding-inline-end: calc(var(--_sidebar-width-right) + var(--gap));
	}

	/* Sidebar left */
	[data-nav-toggle=".sidebar-left"] {
		opacity: 0;
		pointer-events: none;
	}

	&:has(.sidebar-left) {
		--_sidebar-width-left: 81px; /* 80px + 1px border */

		[data-nav-toggle=".sidebar-left"] {
			opacity: 1;
			pointer-events: auto;
		}
	}

	/* Sidebar right */
	[data-nav-toggle=".sidebar-right"] {
		opacity: 0;
		pointer-events: none;
	}

	&:has(.sidebar-right) {
		--_sidebar-width-right: 81px; /* 80px + 1px border */

		[data-nav-toggle=".sidebar-right"] {
			opacity: 1;
			pointer-events: auto;
		}
	}

	&:has(.sidebar.spellbook-bar.expanded) {
		--_sidebar-width-right: 90vw;

		@media screen and (min-width: 560px) {
			--_sidebar-width-right: 70vw;
		}

		@media screen and (min-width: 783px) {
			--_sidebar-width-right: 50vw;
		}

		@media screen and (min-width: 1200px) {
			--_sidebar-width-right: 40vw;
		}
	}

	@media screen and (min-width: 783px) {
		&:has(.sidebar.spellbook-bar.expanded) {
			--_sidebar-width-right: 40vw;
		}
	}

	.filter {
		padding-inline-start: var(--_wrapper-padding-inline-start);
		padding-inline-end: var(--_wrapper-padding-inline-end);
	}

	&:has(.filter) {
		--_wrapper-padding-block-start: calc(var(--gap) + 54px);
	}
}

.container {
	max-width: 1000px;
	width: 100%;
	margin-inline: auto;
}


/* Mobile nav */
.mobile-nav-bar-wrapper {
	z-index: 998;
	position: fixed;
	inset-inline: 0;
	bottom: var(--_mobile-nav-spacer);
	padding-inline: var(--_mobile-nav-spacer);
	transition: var(--_transform-transition);

	@media screen and (min-width: 783px) {
		transform: translateY(150%);
	}

	.mobile-nav {
		max-width: 400px;
		margin-inline: auto;
		padding: var(--_mobile-nav-spacer);
		border-radius: var(--radius-3);
		border: var(--border);
		display: grid;
		grid-template-columns: 1fr 56px 1fr;
		align-items: center;
		justify-content: center;
		text-align: center;

		.btn-primary {
			font-size: 24px;
			position: relative;
			width: 56px !important;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24px;
		}
	}
}