// .breadcrumb

$breadcrumb-bg: transparent !default;
$breadcrumb-border-radius: clay-enable-rounded($border-radius) !default;
$breadcrumb-font-size: 0.875rem !default;
$breadcrumb-font-weight: $font-weight-normal !default;
$breadcrumb-margin-bottom: 0 !default;
$breadcrumb-padding-x: 0.125rem !default;
$breadcrumb-padding-y: 0.59375rem !default;
$breadcrumb-text-transform: none !default;

$breadcrumb-link-color: $gray-600 !default;
$breadcrumb-link-text-decoration: $link-decoration !default;

$breadcrumb-link-hover-color: $breadcrumb-link-color !default;
$breadcrumb-link-hover-text-decoration: $link-hover-decoration !default;

$breadcrumb: () !default;
$breadcrumb: map-merge(
	(
		background-color: var(--breadcrumb-background-color, $breadcrumb-bg),
		border-radius:
			var(--breadcrumb-border-radius, $breadcrumb-border-radius),
		display: flex,
		flex-wrap: wrap,
		font-size: var(--breadcrumb-font-size, $breadcrumb-font-size),
		font-weight: var(--breadcrumb-font-weight, $breadcrumb-font-weight),
		list-style: none,
		margin-bottom:
			var(--breadcrumb-margin-bottom, $breadcrumb-margin-bottom),
		padding: var(--breadcrumb-padding-y, $breadcrumb-padding-y)
			var(--breadcrumb-padding-x, $breadcrumb-padding-x),
	),
	$breadcrumb
);

// .breadcrumb-item + .breadcrumb-item::before

$breadcrumb-divider: quote('/') !default;

$breadcrumb-divider-color: $breadcrumb-link-color !default;
$breadcrumb-divider-font-family: null !default;
$breadcrumb-divider-font-weight: null !default;

$breadcrumb-divider-svg-icon: var(
	--breadcrumb-divider-svg-icon,
	clay-icon(angle-right, #6b6c7e)
) !default;
$breadcrumb-divider-svg-icon-height: 0.6em !default;
$breadcrumb-divider-svg-icon-width: $breadcrumb-divider-svg-icon-height !default;

// Breadcrumb Item

$breadcrumb-active-color: $gray-900 !default;
$breadcrumb-active-font-weight: $font-weight-semi-bold !default;

$breadcrumb-item: () !default;
$breadcrumb-item: map-deep-merge(
	(
		font-size: var(--breadcrumb-font-size, $breadcrumb-font-size),
		font-weight: var(--breadcrumb-font-weight, $breadcrumb-font-weight),
		margin-right: 0.5em,
		position: relative,

		active: (
			color: var(--breadcrumb-active-color, $breadcrumb-active-color),
			font-weight:
				var(
					--breadcrumb-active-font-weight,
					$breadcrumb-active-font-weight
				),
		),

		breadcrumb-item: (
			padding-left: 1em,

			before: (
				color:
					var(--breadcrumb-divider-color, $breadcrumb-divider-color),
				display: block,
				float: left,
				background-image:
					var(
						--breadcrumb-divider-svg-icon,
						$breadcrumb-divider-svg-icon
					),
				background-repeat: no-repeat,
				background-size: 100%,
				content: '',
				height:
					var(
						--breadcrumb-divider-svg-icon-height,
						$breadcrumb-divider-svg-icon-height
					),
				left: 0,
				margin-top: calc(#{$breadcrumb-divider-svg-icon-height} / -2),
				padding: 0,
				position: absolute,
				top: 50%,
				width:
					var(
						--breadcrumb-divider-svg-icon-width,
						$breadcrumb-divider-svg-icon-width
					),
			),
		),

		dropdown-toggle: (
			text-decoration: none,

			hover: (
				text-decoration: none,
			),

			focus: (
				text-decoration: none,
			),
		),
	),
	$breadcrumb-item
);

// Breadcrumb Text Truncate

$breadcrumb-text-truncate-icon-spacer-x: 0.875rem !default;
$breadcrumb-text-truncate-max-width: 18.75rem -
	$breadcrumb-text-truncate-icon-spacer-x !default;
$breadcrumb-text-truncate-max-width-mobile: 9.375rem -
	$breadcrumb-text-truncate-icon-spacer-x !default;

$breadcrumb-text-truncate: () !default;
$breadcrumb-text-truncate: map-merge(
	(
		display: inline-block,
		max-width: $breadcrumb-text-truncate-max-width,
		overflow: hidden,
		text-decoration: inherit,
		text-overflow: ellipsis,
		vertical-align: bottom,
		white-space: nowrap,
	),
	$breadcrumb-text-truncate
);

// Breadcrumb Link

$breadcrumb-link: () !default;
$breadcrumb-link: map-deep-merge(
	(
		border-radius: 1px,
		color: var(--breadcrumb-link-color, $breadcrumb-link-color),
		display: block,
		line-height: 1.5rem,
		text-decoration:
			var(
				--breadcrumb-link-text-decoration,
				$breadcrumb-link-text-decoration
			),
		text-transform:
			var(--breadcrumb-link-text-transform, $breadcrumb-text-transform),
		transition: box-shadow 0.15s ease-in-out,

		hover: (
			color:
				var(--breadcrumb-link-hover-color, $breadcrumb-link-hover-color),
			text-decoration:
				var(
					--breadcrumb-link-hover-text-decoration,
					$breadcrumb-link-hover-text-decoration
				),
		),

		focus: (),
	),
	$breadcrumb-link
);

// Breadcrumb Item Expand

$breadcrumb-toggle: () !default;
$breadcrumb-toggle: map-merge(
	(
		color: $breadcrumb-link-color,
		flex-shrink: 0,
		margin-top: $breadcrumb-padding-y,
	),
	$breadcrumb-toggle
);

$breadcrumb-bar: () !default;
$breadcrumb-bar: map-deep-merge(
	(
		display: flex,
	),
	$breadcrumb-bar
);