$cadmin-c-slideout-sidebar-width: 320px !default;

$cadmin-c-slideout-sidebar-width-mobile: 280px !default;

$cadmin-c-slideout-tbar-stacked-min-width: 40px !default;

$cadmin-c-slideout-tbar-stacked-min-width-mobile: 40px !default;

$cadmin-c-slideout-fluid-sidebar-width-md: '50vw' !default;

$cadmin-c-slideout-fluid-sidebar-width: '33vw' !default;

// C Slideout Transitions

$cadmin-c-slideout-transition-in: () !default;
$cadmin-c-slideout-transition-in: map-merge(
	(
		overflow: hidden,
		transition: all 0.3s ease-in-out,
	),
	$cadmin-c-slideout-transition-in
);

$cadmin-c-slideout-transition-out: () !default;
$cadmin-c-slideout-transition-out: map-merge(
	(
		overflow: hidden,
		transition: all 0.2s ease-in,
	),
	$cadmin-c-slideout-transition-out
);

// C Slideout Positions

$cadmin-c-slideout-absolute: () !default;
$cadmin-c-slideout-absolute: map-merge(
	(
		position: absolute,
	),
	$cadmin-c-slideout-absolute
);

$cadmin-c-slideout-fixed: () !default;
$cadmin-c-slideout-fixed: map-merge(
	(
		position: fixed,
	),
	$cadmin-c-slideout-fixed
);

$cadmin-c-slideout-container: () !default;
$cadmin-c-slideout-container: map-deep-merge(
	(
		min-height: 480px,
		position: relative,
	),
	$cadmin-c-slideout-container
);

$cadmin-c-slideout-push-start: () !default;
$cadmin-c-slideout-push-start: map-deep-merge(
	(
		padding-left: $cadmin-c-slideout-sidebar-width,

		media-breakpoint-down: (
			md: (
				padding-left: 0px,
			),
		),
	),
	$cadmin-c-slideout-push-start
);

$cadmin-c-slideout-push-end: () !default;
$cadmin-c-slideout-push-end: map-deep-merge(
	(
		padding-right: $cadmin-c-slideout-sidebar-width,

		media-breakpoint-down: (
			md: (
				padding-right: 0px,
			),
		),
	),
	$cadmin-c-slideout-push-end
);

// C Slideout Base

$cadmin-c-slideout-sm-down: () !default;
$cadmin-c-slideout-sm-down: map-deep-merge(
	(
		sidebar: (
			width: $cadmin-c-slideout-sidebar-width-mobile,
		),
	),
	$cadmin-c-slideout-sm-down
);

$cadmin-c-slideout: () !default;
$cadmin-c-slideout: map-deep-merge(
	(
		display: flex,
		overflow: hidden,
		z-index: $cadmin-zindex-c-slideout,

		c-slideout-shown: (
			overflow: visible,
		),

		sidebar: (
			display: none,
			flex-shrink: 0,
			position: relative,
			width: $cadmin-c-slideout-sidebar-width,

			sidebar-body: (
				flex-grow: 1,
				overflow: visible,
			),

			sidebar-footer: (
				border-top-width: 1px,
			),

			'@supports (position: sticky)': (
				'@media (max-height: 700px)': (
					'.sidebar-header.sticky-top': (
						position: static,
					),

					'.sidebar-footer.sticky-bottom': (
						position: static,
					),
				),
			),
		),

		sidebar-c-slideout-show: (
			display: flex,
			flex-direction: column,
		),

		sidebar-c-slideout-transition: (
			display: flex,
			flex-direction: column,

			c-horizontal-resizer: (
				display: none,
			),
		),

		tbar-stacked: (
			display: none,
			flex-shrink: 0,
			min-width: $cadmin-c-slideout-tbar-stacked-min-width,
			overflow: auto,
			position: relative,
			z-index: 1,
		),

		tbar-stacked-c-slideout-show: (
			display: block,
		),

		tbar-stacked-c-slideout-transition: (
			display: block,
		),

		media-breakpoint-down: (
			sm: $cadmin-c-slideout-sm-down,
		),
	),
	$cadmin-c-slideout
);

$cadmin-c-slideout-fluid: () !default;
$cadmin-c-slideout-fluid: map-deep-merge(
	(
		'&.c-slideout-push-start': (
			padding-left: $cadmin-c-slideout-fluid-sidebar-width,
		),

		'&.c-slideout-push-end': (
			padding-right: $cadmin-c-slideout-fluid-sidebar-width,
		),

		sidebar: (
			max-width: $cadmin-c-slideout-fluid-sidebar-width,
			width: $cadmin-c-slideout-fluid-sidebar-width,
		),

		media-breakpoint-down: (
			md: (
				'&.c-slideout-push-start': (
					padding-left: $cadmin-c-slideout-fluid-sidebar-width-md,
				),

				'&.c-slideout-push-end': (
					padding-right: $cadmin-c-slideout-fluid-sidebar-width-md,
				),

				sidebar: (
					max-width: $cadmin-c-slideout-fluid-sidebar-width-md,
					width: $cadmin-c-slideout-fluid-sidebar-width-md,
				),
			),

			sm: (
				'&.c-slideout-push-start': (
					padding-left: 0px,
				),

				'&.c-slideout-push-end': (
					padding-right: 0px,
				),

				sidebar: (
					max-width: none,
					width: 100vw,
				),
			),
		),
	),
	$cadmin-c-slideout-fluid
);

// C Slideout Start

$cadmin-c-slideout-start-sm-down: () !default;
$cadmin-c-slideout-start-sm-down: map-deep-merge(
	(
		c-slideout-tbar-shown-sidebar: (
			left: calc(#{$cadmin-c-slideout-sidebar-width-mobile} * -1),
		),

		sidebar: (
			left:
				calc(
					(
							#{$cadmin-c-slideout-sidebar-width-mobile} + #{$cadmin-c-slideout-tbar-stacked-min-width-mobile}
						) * -1
				),
			width: $cadmin-c-slideout-sidebar-width-mobile,
		),

		tbar-stacked: (
			left: calc(#{$cadmin-c-slideout-tbar-stacked-min-width-mobile} * -1),
		),
	),
	$cadmin-c-slideout-start-sm-down
);

$cadmin-c-slideout-start: () !default;
$cadmin-c-slideout-start: map-deep-merge(
	(
		bottom: 0px,
		left: 0px,
		top: 0px,

		c-slideout-tbar-shown-sidebar: (
			left: calc(#{$cadmin-c-slideout-sidebar-width} * -1),
		),

		sidebar: (
			left:
				calc(
					(
							#{$cadmin-c-slideout-sidebar-width} + #{$cadmin-c-slideout-tbar-stacked-min-width}
						) * -1
				),
			width: $cadmin-c-slideout-sidebar-width,
		),

		sidebar-c-slideout-show: (
			left: 0px,
		),

		tbar-stacked: (
			left: calc(#{$cadmin-c-slideout-tbar-stacked-min-width} * -1),
		),

		tbar-stacked-c-slideout-show: (
			left: 0px,
		),

		media-breakpoint-down: (
			sm: $cadmin-c-slideout-start-sm-down,
		),
	),
	$cadmin-c-slideout-start
);

// C Slideout End

$cadmin-c-slideout-end-sm-down: () !default;
$cadmin-c-slideout-end-sm-down: map-deep-merge(
	(
		c-slideout-tbar-shown-sidebar: (
			right: calc(#{$cadmin-c-slideout-sidebar-width-mobile} * -1),
		),

		sidebar: (
			right:
				calc(
					(
							#{$cadmin-c-slideout-sidebar-width-mobile} + #{$cadmin-c-slideout-tbar-stacked-min-width-mobile}
						) * -1
				),
		),

		tbar-stacked: (
			right:
				calc(#{$cadmin-c-slideout-tbar-stacked-min-width-mobile} * -1),
		),
	),
	$cadmin-c-slideout-end-sm-down
);

$cadmin-c-slideout-end: () !default;
$cadmin-c-slideout-end: map-deep-merge(
	(
		bottom: 0px,
		right: 0px,
		top: 0px,

		c-slideout-tbar-shown-sidebar: (
			right: calc(#{$cadmin-c-slideout-sidebar-width} * -1),
		),

		sidebar: (
			right:
				calc(
					(
							#{$cadmin-c-slideout-sidebar-width} + #{$cadmin-c-slideout-tbar-stacked-min-width}
						) * -1
				),
		),

		sidebar-c-slideout-show: (
			right: 0px,
		),

		tbar-stacked: (
			right: calc(#{$cadmin-c-slideout-tbar-stacked-min-width} * -1),
		),

		tbar-stacked-c-slideout-show: (
			right: 0px,
		),

		c-horizontal-resizer: (
			left: 0px,
			right: auto,
		),

		media-breakpoint-down: (
			sm: $cadmin-c-slideout-end-sm-down,
		),
	),
	$cadmin-c-slideout-end
);

$cadmin-c-slideout-height-full: () !default;
$cadmin-c-slideout-height-full: map-deep-merge(
	(
		z-index: $cadmin-zindex-c-slideout-height-full,
	),
	$cadmin-c-slideout-height-full
);