/**
 * P'INC Offcanvas - Styles
 * Version: 1.0.0
 */

/* ====================================== */
/* CSS VARIABLES */
/* ====================================== */
:root {
    /* Burger Button */
    --pinc-offcanvas-burger-width: var(--spacing-2);
    --pinc-offcanvas-burger-height: var(--spacing-1-5);
    --pinc-offcanvas-burger-line-height: 5px;
    --pinc-offcanvas-burger-color: var(--color-green);
    
    /* Panel */
    --pinc-offcanvas-width: 66.6%;
    --pinc-offcanvas-bg: var(--color-green);
    --pinc-offcanvas-direction: right; /* right, left, top, bottom */
    
    /* Backdrop */
    --pinc-offcanvas-backdrop-bg: rgba(0, 0, 0, 0);
    
    /* Close Button */
    --pinc-offcanvas-close-size: var(--spacing-2);
    --pinc-offcanvas-close-line-height: 5px;
    --pinc-offcanvas-close-color: var(--color-paper);
    --pinc-offcanvas-close-top: var(--spacing-1);
    --pinc-offcanvas-close-right: var(--container-padding-x);
    
    /* Animations */
    --pinc-offcanvas-duration: 0.2s;
    --pinc-offcanvas-easing: ease;
    
    /* Content */
    --pinc-offcanvas-content-padding: 0;
}


/* ====================================== */
/* BURGER BUTTON */
/* ====================================== */
.pinc-offcanvas-burger {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: 0;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    cursor: pointer;
}

.pinc-offcanvas-burger:hover,
.pinc-offcanvas-burger:active,
.pinc-offcanvas-burger:focus {
    background: transparent !important;
    border: 0 !important;
    outline: none;
}

.pinc-offcanvas-burger-icon {
    position: relative;
    width: var(--pinc-offcanvas-burger-width);
    height: var(--pinc-offcanvas-burger-height);
    flex-shrink: 0;
}

.pinc-offcanvas-burger-icon span {
    position: absolute;
    display: block;
    width: 100%;
    height: var(--pinc-offcanvas-burger-line-height);
    background: var(--pinc-offcanvas-burger-color);
    transition: transform var(--pinc-offcanvas-duration) var(--pinc-offcanvas-easing);
    backface-visibility: hidden;
    border-radius: var(--pinc-offcanvas-burger-line-height);
}

.pinc-offcanvas-burger-icon span:nth-child(1) {
    top: 0;
}

.pinc-offcanvas-burger-icon span:nth-child(2) {
    top: calc(50% - var(--pinc-offcanvas-burger-line-height) / 2);
}

.pinc-offcanvas-burger-icon span:nth-child(3) {
    bottom: 0;
}

.pinc-offcanvas-burger-label {
    font-size: 14px;
    font-weight: 500;
}


/* ====================================== */
/* OFFCANVAS CONTAINER */
/* ====================================== */
.pinc-offcanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s linear var(--pinc-offcanvas-duration);
}

.pinc-offcanvas.pinc-open {
    pointer-events: auto;
    visibility: visible;
    transition-delay: 0s;
}


/* ====================================== */
/* BACKDROP */
/* ====================================== */
.pinc-offcanvas-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--pinc-offcanvas-backdrop-bg);
    opacity: 0;
    transition: opacity var(--pinc-offcanvas-duration) var(--pinc-offcanvas-easing);
}

.pinc-offcanvas.pinc-open .pinc-offcanvas-backdrop {
    opacity: 1;
}


/* ====================================== */
/* PANEL - Default: Right */
/* ====================================== */
.pinc-offcanvas-panel {
    position: absolute;
    width: var(--pinc-offcanvas-width);
    height: 100%;
    background: var(--pinc-offcanvas-bg);
    overflow-y: auto;
    transition: transform var(--pinc-offcanvas-duration) var(--pinc-offcanvas-easing);
    
    /* Default: slide from right */
    top: 0;
    right: 0;
    transform: translateX(100%);
}

.pinc-offcanvas.pinc-open .pinc-offcanvas-panel {
    transform: translateX(0);
}

/* Direction: Left */
.pinc-offcanvas[style*="--pinc-offcanvas-direction: left"] .pinc-offcanvas-panel {
    left: 0;
    right: auto;
    transform: translateX(-100%);
}

.pinc-offcanvas.pinc-open[style*="--pinc-offcanvas-direction: left"] .pinc-offcanvas-panel {
    transform: translateX(0);
}

/* Direction: Top */
.pinc-offcanvas[style*="--pinc-offcanvas-direction: top"] .pinc-offcanvas-panel {
    top: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    height: var(--pinc-offcanvas-width);
    transform: translateY(-100%);
}

.pinc-offcanvas.pinc-open[style*="--pinc-offcanvas-direction: top"] .pinc-offcanvas-panel {
    transform: translateY(0);
}

/* Direction: Bottom */
.pinc-offcanvas[style*="--pinc-offcanvas-direction: bottom"] .pinc-offcanvas-panel {
    bottom: 0;
    top: auto;
    left: 0;
    width: 100%;
    height: var(--pinc-offcanvas-width);
    transform: translateY(100%);
}

.pinc-offcanvas.pinc-open[style*="--pinc-offcanvas-direction: bottom"] .pinc-offcanvas-panel {
    transform: translateY(0);
}

	@media all and (max-width: 1000px) {
		.pinc-offcanvas-panel {
		    width: 100%;
		}
		
		/* Direction: Top */
		.pinc-offcanvas[style*="--pinc-offcanvas-direction: top"] .pinc-offcanvas-panel {
		    height: 100%;
		}
		/* Direction: Bottom */
		.pinc-offcanvas[style*="--pinc-offcanvas-direction: bottom"] .pinc-offcanvas-panel {
		    height: 100%;
		}
	}


/* ====================================== */
/* CLOSE BUTTON */
/* ====================================== */
.pinc-offcanvas-close {
    position: absolute;
    top: var(--pinc-offcanvas-close-top);
    right: var(--pinc-offcanvas-close-right);
    width: var(--pinc-offcanvas-close-size);
    height: var(--pinc-offcanvas-close-size);
    padding: 0;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    transition: opacity var(--pinc-offcanvas-duration) var(--pinc-offcanvas-easing) 0.1s;
}

.pinc-offcanvas-close:hover,
.pinc-offcanvas-close:active,
.pinc-offcanvas-close:focus {
    position: absolute !important;
    top: var(--pinc-offcanvas-close-top) !important;
    right: var(--pinc-offcanvas-close-right) !important;
    background: transparent !important;
    border: 0 !important;
    outline: none;
    transform: none !important;
}

.pinc-offcanvas.pinc-open .pinc-offcanvas-close {
    opacity: 1;
}

.pinc-offcanvas-close span {
    position: absolute;
    top: calc(50% - var(--pinc-offcanvas-close-line-height) / 2);
    left: 0;
    display: block;
    width: 100%;
    height: var(--pinc-offcanvas-close-line-height);
    border-radius: var(--pinc-offcanvas-close-line-height);
    background: var(--pinc-offcanvas-close-color);
}

.pinc-offcanvas-close span:nth-child(1) {
    transform: rotate(45deg);
}

.pinc-offcanvas-close span:nth-child(2) {
    transform: rotate(-45deg);
}


/* ====================================== */
/* CONTENT */
/* ====================================== */
.pinc-offcanvas-content {
    padding: var(--pinc-offcanvas-content-padding);
}


/* ====================================== */
/* TRIGGER ELEMENTS */
/* ====================================== */
.pinc-offcanvas-trigger {
    cursor: pointer;
}