@import './variables';

$nav-width: 256px;
$clipped-height: 56px;
$mini-nav-width: 56px;

.s-navigation-drawer__border {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: $navigation-drawer-border-width;
	background-color: var(--theme-dividers);
}

.s-navigation-drawer__content {
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
}

.s-navigation-drawer {
	background-color: var(--theme-navigation-drawer);
	-webkit-overflow-scrolling: touch;
	display: flex;
	flex-direction: column;
	left: 0;
	max-width: 100%;
	width: var(--s-nav-width, #{$nav-width});
	height: 100%;
	overflow: hidden;
	pointer-events: auto;
	top: 0;
	transition-duration: 0.2s;
	transition-timing-function: map-get($transitions, 'fast-out-slow-in');
	will-change: transform;
	transition-property: transform, visibility, width;
	z-index: var(--s-navigation-drawer-z-index, 4);

	&:not(.active) {
		transform: translateX(-100%);
	}

	&.fixed {
		position: fixed;
	}

	&.absolute {
		position: absolute;
	}

	&.right {
		left: auto;
		right: 0;

		&::after {
			left: 0;
			right: initial;
		}

		&:not(.active) {
			transform: translate(100%);
		}

		.s-navigation-drawer__border {
			right: auto;
			left: 0;
		}
	}

	&.clipped {
		top: var(--s-nav-clipped-height, #{$clipped-height});
		max-height: calc(100% - var(--s-nav-clipped-height, #{$clipped-height}));
	}

	&.mini {
		width: var(--s-nav-mini-width, #{$mini-nav-width});
		overflow: hidden;

		.s-list-item {
			> *:first-child {
				margin-left: 0;
				margin-right: 0;
			}

			> *:not(:first-child) {
				display: none;
			}
		}
	}
}