/*
Theme Name: Robbin
Theme URI: https://www.scherponline.nl/
Author: Scherp Online
Author URI: http://scherponline.nl/
Description: Robbin WordPress theme
Version: 1.0
License: Scherponline
License URI: https://www.scherponline.nl/
Tags: two-columns, right-sidebar, flexible-width
Text Domain: scherponline
*/

@import url("css/variables.css");
@import url("css/core.css");
@import url("css/basic.css");
@import url("css/header.css");
@import url("css/footer.css");




/* Drawer overlay */
.drawer {
	position: fixed;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 999;
	background-color: var(--color-gray);
	transform: translateX(200vw);
	--drawer-spacing: 80px;

	&:not(.active-popup) {
		top: 0;
		right: 0;
		bottom: 0;
		width: 600px;
		max-width: calc(100vw - 160px);
		transition: transform 0.25s ease;
		padding: var(--drawer-spacing, 80px);

		&.active {
			transform: translateX(0);
		}
	}

	&.active-popup {
		opacity: 0;
		transition: opacity 0.25s ease;
		padding: 40px;

		&.active {
			opacity: 1;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			max-height: calc(90vh - var(--drawer-spacing, 80px));
			max-width: 80vw;
			width: 700px;
			
			@media (max-width: 880px) {
				max-height: calc(90vh - calc(var(--drawer-spacing, 32px) * 2));
				max-width: calc(75vw - 48px);
			}

			@media (max-width: 576px) {
				max-height: calc(90vh - calc(var(--drawer-spacing, 24px) * 2));
				max-width: calc(70vw - calc(var(--drawer-spacing, 24px) * 2));
			}
		}
	}

	@media (max-width: 880px) {
		--drawer-spacing: 32px;
	}

	@media (max-width: 576px) {
		--drawer-spacing: 24px;
		padding: 24px;
		width: 100%;
		max-width: calc(100vw - calc(var(--drawer-spacing, 24px) * 2));
	}

	.drawer-close {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 8px;
		cursor: pointer;
		margin-bottom: 32px;
		font-size: 12px;
		font-weight: 400;
		width: fit-content;

		&:before {
			content: '';
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='20' viewBox='0 0 12 20' fill='none'%3E%3Cpath d='M10.1133 20L0.113281 10L10.1133 0L11.8883 1.775L3.66328 10L11.8883 18.225L10.1133 20Z' fill='%23103634'/%3E%3C/svg%3E");
			height: 20px;
			width: 12px;
		}
	}

	&::-webkit-scrollbar {
		width: 10px;
	}

	&::-webkit-scrollbar-track {
		background: var(--color-white);
		border-radius: 2px;
	}

	&::-webkit-scrollbar-thumb {
		background: var(--color-black);
		border-radius: 2px;
	}
}

#drawer-overlay {
	opacity: 0;
	transition: 0.25s ease opacity;
}

body:has(.drawer.active) #drawer-overlay {
	background-color: rgba(0, 0, 0, .35);
	bottom: 0;
	left: 0;
	opacity: 1;
	position: fixed;
	right: 0;
	top: 0;
	transition: opacity .3s;
	z-index: 998;
}