/**
*--------------------------------------------------------------------------
* Модуль: VGSidebar
* Автор: Vegas DEV
* Лицензия: смотри LICENSE.md
*--------------------------------------------------------------------------
**/

@import "./option/variables";
@import "./option/mixin";

:root {
	@include mix-vars('sidebar', $sidebar-map, $prefix);

	@media screen and (max-width: 401px) {
		--vg-sidebar-horizontal-width: 100%;
	}
}

.vg-sidebar {
	position: fixed;
	width: auto;
	height: auto;
	transition: all .5s ease-in-out;
	z-index: 1040;
	background: var(--vg-sidebar-bg-color);
	color: var(--vg-sidebar-color);
	box-shadow: var(--vg-sidebar-box-shadow);

	&.left, &.right {
		width: var(--vg-sidebar-horizontal-width);
		height: 100vh;
		top: 0;
	}

	&.left {
		left: -100%;

		&.show {
			left: 0;
		}
	}

	&.right {
		right: -100%;

		&.show {
			right: 0;
		}
	}

	&.top, &.bottom {
		height: var(--vg-sidebar-vertical-height);
		width: 100vw;
		left: 0;
	}

	&.top {
		top: -100%;

		&.show {
			top: 0;
		}
	}

	&.bottom {
		bottom: -100%;

		&.show {
			bottom: 0;
		}
	}

	&-backdrop {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: var(--vg-sidebar-backdrop-bg);
		transition: all .5s ease-in-out;
		opacity: 0;
		z-index: 999;

		&.fade {
			opacity: var(--vg-sidebar-backdrop-opacity);
		}
	}

	&-close {
		position: absolute;
		right: 1rem;
		top: 1rem;
		border: none;
		background: transparent;

		svg {
			width: 24px;
			height: 24px;
		}
	}

	&-header {
		height: var(--vg-sidebar-header-height);
		z-index: 10;
		position: relative;
		display: flex;
		align-items: center;
		padding: var(--vg-sidebar-padding);
		border-bottom: var(--vg-sidebar-border);
	}

	&-body {
		height: calc(100% - var(--vg-sidebar-header-height) - var(--vg-sidebar-footer-height));
		overflow-y: auto;
		padding: var(--vg-sidebar-padding);
	}

	&-footer {
		height: var(--vg-sidebar-footer-height);
		padding: var(--vg-sidebar-padding);
		border-top: var(--vg-sidebar-border);
	}
}