@use "../tools/mixins";

/*-------------------------------------------------------
Sidebar
-------------------------------------------------------*/

.sidebar {
	position: fixed;
	width: 100%;
	height: 100dvh;
	z-index: 100000;

	body.editor-styles-wrapper & {
		display: none;
	}

	// Inner
	&__inner {
		width: 100%;
		height: 100%;
	}

	// Overlay
	&__overlay {
		position: absolute !important;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
		cursor: pointer;
	}

	// Widgets
	&__widgets {
		position: relative;
		width: 100%;
		height: 100%;
		z-index: 10;
		overflow-y: auto;
		background-color: var(--wp--custom--color--sidebar--background);

		@include mixins.media("break-mobile") {
			max-width: 26rem;
		}
	}
}

/*
Sidebar animations
*/

body:not(.editor-styles-wrapper) {

	.sidebar {
		visibility: hidden;
		pointer-events: none;
		transition: visibility 0.3s ease-out;

		// Overlay
		&__overlay {
			opacity: 0;
			transition: opacity 0.3s ease-out;
		}

		// Widgets
		&__widgets {
			transform: translate(120%, 0);
			transition: transform 0.3s ease-out;
		}

		// Opened sidebar
		&[data-sidebar="opened"] {
			visibility: visible;
			pointer-events: auto;

			.sidebar {

				// Overlay
				&__overlay {
					opacity: 1;
				}

				// Widgets
				&__widgets {
					transform: translate(0, 0);
				}
			}
		}

		// Closed sidebar
		&[data-sidebar="closed"] {
			visibility: hidden;
			pointer-events: none;
			transition: visibility 0.3s ease-in-out;

			.sidebar {

				// Overlay
				&__overlay {
					opacity: 0;
					transition: opacity 0.35s ease-in-out;
				}

				// Widgets
				&__widgets {
					transform: translate(120%, 0);
					transition: transform 0.3s ease-in-out;
				}
			}
		}
	}
}

/*
Sidebar opener
*/

.sidebar-opener {
	display: block;
	margin: 0;
	padding: 1rem;

	position: fixed !important;
	right: var(--wp--style--root--padding-right);
	bottom: 1.5rem;
	z-index: 10000;

	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--contrast);
	line-height: 1;
	border: 0;
	border-radius: 50%;

	&:hover,
	&:focus,
	&:active {

		&::after {
			animation: 0.25s buttonScale ease-in-out;
		}
	}

	&.hidden {
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none;
	}

	span {
		display: none;
	}

	&::after {
		content: "";
		display: block;
		height: 1.5rem;
		width: 1.5rem;

		background-color: currentColor;
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' enable-background='new 0 0 24 24' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000'%3E%3Cg%3E%3Crect fill='none' height='24' width='24'/%3E%3Cpath d='M15,20H3c-0.55,0-1-0.45-1-1V5c0-0.55,0.45-1,1-1h12c0.55,0,1,0.45,1,1v14C16,19.55,15.55,20,15,20z M19,8h2 c0.55,0,1-0.45,1-1V5c0-0.55-0.45-1-1-1h-2c-0.55,0-1,0.45-1,1v2C18,7.55,18.45,8,19,8z M19,20h2c0.55,0,1-0.45,1-1v-2 c0-0.55-0.45-1-1-1h-2c-0.55,0-1,0.45-1,1v2C18,19.55,18.45,20,19,20z M19,14h2c0.55,0,1-0.45,1-1v-2c0-0.55-0.45-1-1-1h-2 c-0.55,0-1,0.45-1,1v2C18,13.55,18.45,14,19,14z'/%3E%3C/g%3E%3C/svg%3E");
		mask-position: center;
		mask-repeat: no-repeat;
		mask-size: cover;
	}

	.has-modal-open & {
		visibility: hidden;
	}
}

/*
Sidebar opener animations
*/

body:not(.editor-styles-wrapper) {

	.sidebar-opener {
		opacity: 0;
		transform: translateY(50%);
		animation: 0.3s buttonFadeInUp 0.3s ease-out forwards;
	}
}

/*
Animation for button fade-in-up
*/

@keyframes buttonFadeInUp {

	0% {
		opacity: 0;
		transform: translateY(50%);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/*
Animation for button scale
*/

@keyframes buttonScale {

	0% {
		transform: scale(1);
	}

	25% {
		transform: scale(1.15);
	}

	100% {
		transform: scale(1);
	}
}
