vwc-side-drawer.scss

@use 'partials/vwc-side-drawer-variables' as variables;
@use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables' as scheme-variables;
@use '@vonage/vvd-typography/scss/typography' as typography;
@use '@vonage/vvd-foundation/scss/mixins/scrim' as scrim-mixins;


$z-index-default: 6;
$padding-default: 16px;
$inline-size: var(#{variables.$side-drawer-inline-size}, 280px);


:host {
	display: flex;
	block-size: 100vh;
}

:host([position='end']) {
	flex-direction: row-reverse;
}

.side-drawer {
	position: fixed;
	z-index: var(#{variables.$side-drawer-z-index}, #{$z-index-default});
	display: flex;
	overflow: auto;
	flex-direction: column;
	flex-shrink: 0;
	background-color: var(#{variables.$side-drawer-background-color}, var(#{scheme-variables.$vvd-color-canvas}));
	block-size: inherit;
	color: var(#{variables.$side-drawer-color}, var(#{scheme-variables.$vvd-color-on-canvas}));
	inline-size: #{$inline-size};

	&.side-drawer-alternate {
		background-color: var(#{scheme-variables.$vvd-color-canvas});
	}

	&.side-drawer-modal,
	&.side-drawer-dismissible {
		transform: translateX(0%);
		&:not(.side-drawer-open) {
			&.side-drawer-end {
				transform: translateX(100%);
			}
			&:not(.side-drawer-end) {
				transform: translateX(-100%);
			}
		}
		@media (prefers-reduced-motion: no-preference) {
			transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
		}
	}

	&.side-drawer-dismissible.side-drawer-open,
	&:not(.side-drawer-dismissible):not(.side-drawer-modal) {
		+ .side-drawer-app-content {
			@include typography.typography-cat-shorthand(body-1);
			margin-inline-start: #{$inline-size};
			::slotted(vwc-top-app-bar),
			::slotted(vwc-top-app-bar-fixed) {
				--mdc-top-app-bar-width: calc(100% - #{$inline-size});
			}
		}
		&.side-drawer-end {
			+ .side-drawer-app-content {
				margin-inline-end: var(--side-drawer-inline-size, 280px);
				margin-inline-start: 0;
			}
		}
	}
}

.side-drawer-top-bar {
	$gutter: var(#{variables.$side-drawer-padding-top-bar}, #{$padding-default});
	@include typography.typography-cat-shorthand(subtitle-1);
	display: flex;
	flex-shrink: 0;
	align-items: center;
	block-size: 64px;
	padding-inline-end: #{$gutter};
	padding-inline-start: #{$gutter};
}

.side-drawer-content {
	$gutter: var(#{variables.$side-drawer-padding-body}, #{$padding-default});
	background-color: inherit;
	overflow-y: auto;
	padding-inline-end: #{$gutter};
	padding-inline-start: #{$gutter};
}

.side-drawer-modal {
	position: fixed;
	top: 0;
	bottom: 0;
	&:not(.side-drawer-end) {
		inset-inline-start: 0;
	}
	&.side-drawer-end {
		inset-inline-end: 0;
	}
}

.side-drawer-scrim {
	@include scrim-mixins.scrim-variables;
	position: fixed;
	z-index: calc(#{$z-index-default} - 1);
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}