$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: 0,
		),
		tbar-item: (
			align-items: center,
			justify-content: flex-start,
			padding-left: 0,
			padding-right: 0,
		),
		tbar-item-expand: (
			flex-shrink: 0,
			min-width: 0,
		),
		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: 0,
			border-width: 0,
			color: inherit,
			height: 40px,
			margin-bottom: 0,
			margin-top: 0,
			overflow: visible,
			padding-bottom: 0,
			padding-left: 0,
			padding-right: 0,
			padding-top: 0,
			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: nth(map-keys($cadmin-grid-breakpoints), 1),
		tbar-item: (
			padding-left: 0,
		),
	),
	$cadmin-tbar-inline-xs-down
);

$cadmin-tbar-inline-sm-down: () !default;
$cadmin-tbar-inline-sm-down: map-deep-merge(
	(
		breakpoint-down: nth(map-keys($cadmin-grid-breakpoints), 2),
		tbar-item: (
			padding-left: 0,
		),
	),
	$cadmin-tbar-inline-sm-down
);

$cadmin-tbar-inline-md-down: () !default;
$cadmin-tbar-inline-md-down: map-deep-merge(
	(
		breakpoint-down: nth(map-keys($cadmin-grid-breakpoints), 3),
		tbar-item: (
			padding-left: 0,
		),
	),
	$cadmin-tbar-inline-md-down
);

$cadmin-tbar-inline-lg-down: () !default;
$cadmin-tbar-inline-lg-down: map-deep-merge(
	(
		breakpoint-down: nth(map-keys($cadmin-grid-breakpoints), 4),
		tbar-item: (
			padding-left: 0,
		),
	),
	$cadmin-tbar-inline-lg-down
);

$cadmin-tbar-inline-xl-down: () !default;
$cadmin-tbar-inline-xl-down: map-deep-merge(
	(
		breakpoint-down: nth(map-keys($cadmin-grid-breakpoints), 5),
		tbar-item: (
			padding-left: 0,
		),
	),
	$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: 0 0 1px 0,
		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: 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: inset 1px 0 0 0 rgba($cadmin-white, 0.06) #{','} inset -1px
			0 0 0 rgba($cadmin-white, 0.06),
		color: $cadmin-gray-500,
		tbar-divider-before: (
			before: (
				background-color: rgba($cadmin-white, 0.06),
			),
		),
		tbar-divider-after: (
			after: (
				background-color: rgba($cadmin-white, 0.06),
			),
		),
		tbar-btn-monospaced: (
			hover: (
				color: $cadmin-white,
			),
			focus: (
				color: $cadmin-white,
			),
			disabled: (
				color: inherit,
			),
			active: (
				background-color: rgba($cadmin-white, 0.06),
				color: $cadmin-white,
			),
			active-class: (
				after: (
					background-color: $cadmin-primary-l1,
					bottom: 0,
					content: '',
					display: block,
					left: 0,
					position: absolute,
					top: 0,
					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: inset 1px 0 0 0 rgba($cadmin-white, 0.06) #{','} inset -1px
			0 0 0 rgba($cadmin-white, 0.06),
		border-color: rgba($cadmin-white, 0.06),
		color: $cadmin-gray-500,
		tbar-divider-before: (
			before: (
				background-color: rgba($cadmin-white, 0.06),
			),
		),
		tbar-divider-after: (
			after: (
				background-color: rgba($cadmin-white, 0.06),
			),
		),
		tbar-btn-monospaced: (
			hover: (
				color: $cadmin-white,
			),
			focus: (
				color: $cadmin-white,
			),
			disabled: (
				color: inherit,
			),
			active: (
				background-color: rgba($cadmin-white, 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: 0,
			padding-top: 0,
		),
		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: 0,
		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: 0,
			border-width: 0,
			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),
				clay-lighten(clay-desaturate($cadmin-primary, 27.03), 37.06)
			),
		color: #8e94aa,
		component-label: $cadmin-subnav-tbar-primary-disabled-component-label,
	),
	$cadmin-subnav-tbar-primary-disabled
);