$cadmin-tbar-item-padding-x: 8px !default;
$cadmin-tbar-item-padding-y: null !default;

// Tbar Stacked

$cadmin-tbar-stacked: () !default;
$cadmin-tbar-stacked: map-deep-merge(
	(
		display: inline-flex,
		height: 100%,
		padding-bottom: 8px,
		padding-top: 8px,

		tbar-nav: (
			flex-direction: column,
			min-width: 0px,
		),

		tbar-item: (
			align-items: center,
			justify-content: flex-start,
			padding-left: 0px,
			padding-right: 0px,
		),

		tbar-item-expand: (
			flex-shrink: 0,
			min-width: 0px,
		),

		tbar-divider-before: (
			before: (
				background-color: $cadmin-body-color,
				content: '',
				display: block,
				height: 1px,
				margin-bottom: 4px,
				margin-top: 4px,
				width: 40px,
			),
		),

		tbar-divider-after: (
			after: (
				background-color: $cadmin-body-color,
				content: '',
				display: block,
				height: 1px,
				margin-bottom: 4px,
				margin-top: 4px,
				width: 40px,
			),
		),

		tbar-btn-monospaced: (
			border-color: transparent,
			border-radius: 0px,
			border-width: 0px,
			color: inherit,
			height: 40px,
			margin-bottom: 0px,
			margin-top: 0px,
			overflow: visible,
			padding-bottom: 0px,
			padding-left: 0px,
			padding-right: 0px,
			padding-top: 0px,
			position: relative,
			width: 40px,

			focus: (
				box-shadow: $cadmin-component-focus-inset-box-shadow,
			),

			active: (
				focus: (
					box-shadow: $cadmin-component-focus-inset-box-shadow,
				),
			),
		),
	),
	$cadmin-tbar-stacked
);

// Tbar Inline {xs|sm|md|lg|xl} Down

$cadmin-tbar-inline-xs-down: () !default;
$cadmin-tbar-inline-xs-down: map-deep-merge(
	(
		breakpoint-down: 'xs',
		tbar-item: (
			padding-left: 0px,
		),
	),
	$cadmin-tbar-inline-xs-down
);

$cadmin-tbar-inline-sm-down: () !default;
$cadmin-tbar-inline-sm-down: map-deep-merge(
	(
		breakpoint-down: 'sm',
		tbar-item: (
			padding-left: 0px,
		),
	),
	$cadmin-tbar-inline-sm-down
);

$cadmin-tbar-inline-md-down: () !default;
$cadmin-tbar-inline-md-down: map-deep-merge(
	(
		breakpoint-down: 'md',
		tbar-item: (
			padding-left: 0px,
		),
	),
	$cadmin-tbar-inline-md-down
);

$cadmin-tbar-inline-lg-down: () !default;
$cadmin-tbar-inline-lg-down: map-deep-merge(
	(
		breakpoint-down: 'lg',
		tbar-item: (
			padding-left: 0px,
		),
	),
	$cadmin-tbar-inline-lg-down
);

$cadmin-tbar-inline-xl-down: () !default;
$cadmin-tbar-inline-xl-down: map-deep-merge(
	(
		breakpoint-down: 'xl',
		tbar-item: (
			padding-left: 0px,
		),
	),
	$cadmin-tbar-inline-xl-down
);

// Component Tbar

$cadmin-component-tbar: () !default;
$cadmin-component-tbar: map-deep-merge(
	(
		border-color: $cadmin-gray-300,
		border-style: solid,
		border-width: 0px 0px 1px 0px,
		color: $cadmin-gray-600,
		height: 56px,
	),
	$cadmin-component-tbar
);

// Tbar Variants

$cadmin-tbar-light: () !default;
$cadmin-tbar-light: map-deep-merge(
	(
		background-color: $cadmin-white,
		box-shadow:
			unquote(
				'inset 1px 0 0 0 #{$cadmin-gray-200}, inset -1px 0 0 0 #{$cadmin-gray-200}'
			),
		color: $cadmin-secondary,

		tbar-divider-before: (
			before: (
				background-color: $cadmin-gray-200,
			),
		),

		tbar-divider-after: (
			after: (
				background-color: $cadmin-gray-200,
			),
		),

		tbar-btn-monospaced: (
			hover: (
				color: $cadmin-dark,
			),

			focus: (
				color: $cadmin-dark,
			),

			disabled: (
				color: inherit,
			),

			active: (
				background-color: $cadmin-gray-200,
				color: $cadmin-dark,
			),
		),
	),
	$cadmin-tbar-light
);

$cadmin-tbar-dark-d1: () !default;
$cadmin-tbar-dark-d1: map-deep-merge(
	(
		background-color: $cadmin-dark-d1,
		box-shadow:
			unquote(
				'inset 1px 0 0 0 hsl(from #{$cadmin-white} h s l / 0.06), inset -1px 0 0 0 hsl(from #{$cadmin-white} h s l / 0.06)'
			),
		color: $cadmin-gray-500,

		tbar-divider-before: (
			before: (
				background-color:
					unquote('hsl(from #{$cadmin-white} h s l / 0.06)'),
			),
		),

		tbar-divider-after: (
			after: (
				background-color:
					unquote('hsl(from #{$cadmin-white} h s l / 0.06)'),
			),
		),

		tbar-btn-monospaced: (
			hover: (
				color: $cadmin-white,
			),

			focus: (
				color: $cadmin-white,
			),

			disabled: (
				color: inherit,
			),

			active: (
				background-color:
					unquote('hsl(from #{$cadmin-white} h s l / 0.06)'),
				color: $cadmin-white,
			),

			active-class: (
				after: (
					background-color: $cadmin-primary-l1,
					bottom: 0px,
					content: '',
					display: block,
					left: 0px,
					position: absolute,
					top: 0px,
					width: 4px,
				),
			),
		),
	),
	$cadmin-tbar-dark-d1
);

$cadmin-tbar-dark-l2: () !default;
$cadmin-tbar-dark-l2: map-deep-merge(
	(
		background-color: $cadmin-dark-l2,
		box-shadow:
			unquote(
				'inset 1px 0 0 0 hsl(from #{$cadmin-white} h s l / 0.06), inset -1px 0 0 0 hsl(from #{$cadmin-white} h s l / 0.06)'
			),
		border-color: unquote('hsl(from #{$cadmin-white} h s l / 0.06)'),
		color: $cadmin-gray-500,

		tbar-divider-before: (
			before: (
				background-color:
					unquote('hsl(from #{$cadmin-white} h s l / 0.06)'),
			),
		),

		tbar-divider-after: (
			after: (
				background-color:
					unquote('hsl(from #{$cadmin-white} h s l / 0.06)'),
			),
		),

		tbar-btn-monospaced: (
			hover: (
				color: $cadmin-white,
			),

			focus: (
				color: $cadmin-white,
			),

			disabled: (
				color: inherit,
			),

			active: (
				background-color:
					unquote('hsl(from #{$cadmin-white} h s l / 0.06)'),
				color: $cadmin-white,
			),
		),
	),
	$cadmin-tbar-dark-l2
);

// Subnav Tbar

$cadmin-subnav-tbar-component-title: () !default;
$cadmin-subnav-tbar-component-title: map-deep-merge(
	(
		display: inline-block,
		font-size: 14px,
		font-weight: $cadmin-font-weight-semi-bold,
		line-height: 1.45,
		margin-bottom: 4px,
		margin-top: 4px,
		max-width: 100%,
	),
	$cadmin-subnav-tbar-component-title
);

$cadmin-subnav-tbar-component-link: () !default;
$cadmin-subnav-tbar-component-link: map-deep-merge(
	(
		color: $cadmin-link-color,
		font-weight: $cadmin-font-weight-semi-bold,

		hover: (
			color: $cadmin-link-hover-color,
		),
	),
	$cadmin-subnav-tbar-component-link
);

$cadmin-subnav-tbar-component-text: () !default;
$cadmin-subnav-tbar-component-text: map-deep-merge(
	(
		display: inline-block,
		line-height: 1.45,
		margin-bottom: 4px,
		margin-top: 4px,
		max-width: 100%,
	),
	$cadmin-subnav-tbar-component-text
);

$cadmin-subnav-tbar: () !default;
$cadmin-subnav-tbar: map-deep-merge(
	(
		font-size: 14px,

		tbar-section: (
			text-align: left,
		),

		strong: (
			font-weight: $cadmin-font-weight-semi-bold,
		),

		tbar-item-padding: (
			padding-left: 8px,
			padding-right: 8px,
		),

		tbar-btn: (
			height: 24px,
			line-height: 1,
			margin-bottom: 2px,
			margin-top: 2px,
			padding-bottom: 0px,
			padding-top: 0px,
		),

		tbar-btn-monospaced: (
			margin-bottom: 2px,
			margin-top: 2px,
			padding: 4px,
		),

		component-link: $cadmin-subnav-tbar-component-link,

		component-title: $cadmin-subnav-tbar-component-title,

		component-text: $cadmin-subnav-tbar-component-text,

		component-label: (
			font-weight: $cadmin-font-weight-normal,
		),

		tbar-link: (
			margin-bottom: 2px,
			margin-top: 2px,
			padding-bottom: 1.5px,
			padding-left: 4px,
			padding-right: 4px,
			padding-top: 1.5px,
		),

		tbar-link-monospaced: (
			height: 24px,
			margin-bottom: 2px,
			margin-top: 2px,
			width: 24px,
		),
	),
	$cadmin-subnav-tbar
);

// Subnav Tbar Variants

$cadmin-subnav-tbar-light: () !default;
$cadmin-subnav-tbar-light: map-deep-merge(
	(
		background-color:
			setter(
				map-get($cadmin-subnav-tbar-light, bg-color),
				$cadmin-light-l2
			),
		color: $cadmin-gray-600,
		padding-y: 2px,
	),
	$cadmin-subnav-tbar-light
);

// Subnav Tbar Primary

$cadmin-subnav-tbar-primary-component-link: () !default;
$cadmin-subnav-tbar-primary-component-link: map-deep-merge(
	(
		color: $cadmin-gray-900,

		hover: (
			color: $cadmin-gray-900,
		),

		disabled: (
			color: $cadmin-gray-600,
			cursor: $cadmin-disabled-cursor,
			opacity: 0.65,
			text-decoration: none,
		),
	),
	$cadmin-subnav-tbar-primary-component-link
);

$cadmin-subnav-tbar-primary-component-label-close: () !default;
$cadmin-subnav-tbar-primary-component-label-close: map-deep-merge(
	(
		focus: (
			color: inherit,
		),

		disabled: (
			color: $cadmin-gray-600,
			opacity: 0.65,
		),
	),
	$cadmin-subnav-tbar-primary-component-label-close
);

$cadmin-subnav-tbar-primary-component-label: () !default;
$cadmin-subnav-tbar-primary-component-label: map-deep-merge(
	(
		close: $cadmin-subnav-tbar-primary-component-label-close,
	),
	$cadmin-subnav-tbar-primary-component-label
);

$cadmin-subnav-tbar-primary-tbar-label-size: () !default;
$cadmin-subnav-tbar-primary-tbar-label-size: map-deep-merge(
	(
		font-size: 12px,
		margin-right: 0px,
		padding-bottom: 5px,
		padding-left: 10px,
		padding-right: 10px,
		padding-top: 5px,
		text-transform: none,
	),
	$cadmin-subnav-tbar-primary-tbar-label-size
);

$cadmin-subnav-tbar-primary: () !default;
$cadmin-subnav-tbar-primary: map-deep-merge(
	(
		background-color:
			setter(
				map-get($cadmin-subnav-tbar-primary, bg-color),
				$cadmin-primary-l2
			),
		padding-bottom: 10px,
		padding-left: 4px,
		padding-right: 4px,
		padding-top: 10px,

		tbar-item: (
			justify-content: flex-start,
			padding-left: 4px,
			padding-right: 4px,
		),

		tbar-link-monospaced: (
			border-radius: 0px,
			border-width: 0px,
			height: 48px,
			margin-bottom: -10px,
			margin-top: -10px,
			width: 48px,
		),

		component-link: $cadmin-subnav-tbar-primary-component-link,

		component-label: $cadmin-subnav-tbar-primary-component-label,

		tbar-label: $cadmin-subnav-tbar-primary-tbar-label-size,
	),
	$cadmin-subnav-tbar-primary
);

// Subnav Tbar Primary Disabled

$cadmin-subnav-tbar-primary-disabled-component-label: () !default;
$cadmin-subnav-tbar-primary-disabled-component-label: map-deep-merge(
	(
		border-color: #8e94aa,
	),
	$cadmin-subnav-tbar-primary-disabled-component-label
);

$cadmin-subnav-tbar-primary-disabled: () !default;
$cadmin-subnav-tbar-primary-disabled: map-deep-merge(
	(
		background-color:
			setter(
				map-get($cadmin-subnav-tbar-primary-disabled, bg-color),
				unquote(
					'hsl(from #{$cadmin-primary} h calc(s - 27.03%) calc(l + 37.06%))'
				)
			),
		color: #8e94aa,

		component-label: $cadmin-subnav-tbar-primary-disabled-component-label,
	),
	$cadmin-subnav-tbar-primary-disabled
);