$panel-bg: var(--panel-background-color, $white) !default;
$panel-border-color: var(--panel-border-color, transparent) !default;
$panel-border-radius: var(--panel-border-radius, $border-radius) !default;
$panel-border-style: var(--panel-border-style, solid) !default;

$panel-border-bottom-width: var(--panel-border-bottom-width, 1px) !default;
$panel-border-left-width: var(--panel-border-left-width, 1px) !default;
$panel-border-right-width: var(--panel-border-right-width, 1px) !default;
$panel-border-top-width: var(--panel-border-top-width, 1px) !default;

$panel-border-width: $panel-border-top-width $panel-border-right-width
	$panel-border-bottom-width $panel-border-left-width !default;

$panel-box-shadow: var(--panel-box-shadow, none) !default;
$panel-margin-bottom: var(--panel-margin-bottom, $spacer) !default;

// Panel Header

$panel-header-border-bottom-width: var(
	--panel-header-border-bottom-width,
	0
) !default;

$panel-header-offset-border-radius: var(
	--panel-header-offset-border-radius,
	calc(#{$panel-border-radius} - #{$panel-border-top-width})
) !default;

$panel-header-font-size: var(--panel-header-font-size, 14px) !default;
$panel-header-line-height: var(
	--panel-header-line-height,
	$headings-line-height
) !default;
$panel-header-padding-x: var(--panel-header-padding-x, 20px) !default;
$panel-header-padding-y: var(--panel-header-padding-y, 12px) !default;

$panel-header-collapse-icon-font-size: var(
	--panel-header-collapse-icon-font-size,
	12px
) !default;

$panel-header-collapse-icon-bottom: var(
	--panel-header-collapse-icon-bottom,
	auto
) !default;
$panel-header-collapse-icon-left: var(
	--panel-header-collapse-icon-left,
	auto
) !default;
$panel-header-collapse-icon-right: var(
	--panel-header-collapse-icon-right,
	auto
) !default;
$panel-header-collapse-icon-top: var(
	--panel-header-collapse-icon-top,
	clay-collapse-icon-align(
		$panel-header-padding-y,
		0,
		1em,
		$panel-header-line-height
	)
) !default;

$panel-header-collapse-icon-padding-left: var(
	--panel-header-collapse-icon-padding-left,
	20px
) !default;
$panel-header-collapse-icon-padding-right: var(
	--panel-header-collapse-icon-padding-right,
	45px
) !default;

$panel-header-link-text-decoration: none !default;

$panel-header-link-hover-text-decoration: none !default;

$panel-header-link: () !default;
$panel-header-link: map-deep-merge(
	(
		color: var(--panel-header-link-color, inherit),
		display: block,
		text-decoration:
			var(
				--panel-header-link-text-decoration,
				$panel-header-link-text-decoration
			),
		transition: box-shadow 0.15s ease-in-out,

		hover: (
			color: var(--panel-header-link-hover-color, inherit),
			text-decoration:
				var(
					--panel-header-link-hover-text-decoration,
					$panel-header-link-hover-text-decoration
				),
		),

		focus: (
			box-shadow: $component-focus-box-shadow,
			outline: 0,
			z-index: $zindex-panel-header-link-focus,
		),
	),
	$panel-header-link
);

$panel-header-collapsed-link: () !default;
$panel-header-collapsed-link: map-deep-merge(
	(
		border-color: transparent,
		transition: border-color 0.75s ease,
	),
	$panel-header-collapsed-link
);

// Panel Body
$panel-body-padding-x: var(--panel-body-panel-body-padding-x, 20px) !default;
$panel-body-padding-y: var(--panel-body-panel-body-padding-y, 12px) !default;

// Panel Footer

$panel-footer-border-top-width: var(
	--panel-footer-panel-footer-border-top-width,
	0
) !default;
$panel-footer-offset-border-radius: var(
	--panel-footer-offset-border-radius,
	calc(#{$panel-border-radius} - #{$panel-border-bottom-width})
) !default;
$panel-footer-padding-x: var(
	--panel-footer-padding-x,
	$panel-header-padding-x
) !default;
$panel-footer-padding-y: var(
	--panel-footer-padding-y,
	$panel-header-padding-y
) !default;

// Panel Title

$panel-title-font-size: var(--panel-title-font-size, 14px) !default;
$panel-title-font-weight: var(
	--panel-title-font-weight,
	$font-weight-semi-bold
) !default;
$panel-title-text-transform: var(
	--panel-title-text-transform,
	uppercase
) !default;

// Panel Title Small Element

$panel-title-small-font-size: var(--panel-title-small-font-size, 100%) !default;
$panel-title-small-margin-left: var(
	--panel-title-small-margin-left,
	6px
) !default;

$panel: () !default;
$panel: map-deep-merge(
	(
		background-color: $panel-bg,
		border-color: $panel-border-color,
		border-radius: clay-enable-rounded($panel-border-radius),
		border-style: $panel-border-style,
		border-width: $panel-border-width,
		box-shadow: clay-enable-shadows($panel-box-shadow),
		margin-bottom: $panel-margin-bottom,
		word-wrap: break-word,

		collapse-icon-middle: (
			collapse-icon: (
				font-size: inherit,
			),
		),

		panel-header: (
			border-bottom: $panel-header-border-bottom-width solid transparent,
			border-top-left-radius:
				clay-enable-rounded($panel-header-offset-border-radius),
			border-top-right-radius:
				clay-enable-rounded($panel-header-offset-border-radius),
			display: block,
			font-size: $panel-header-font-size,
			line-height: $panel-header-line-height,
			padding: $panel-header-padding-y $panel-header-padding-x,
			position: relative,
			width: 100%,

			collapsed: (
				border-bottom-left-radius:
					clay-enable-rounded($panel-header-offset-border-radius),
				border-bottom-right-radius:
					clay-enable-rounded($panel-header-offset-border-radius),
				link: $panel-header-collapsed-link,
			),

			collapse-icon: (
				padding-left: $panel-header-collapse-icon-padding-left,
				padding-right: $panel-header-collapse-icon-padding-right,
			),

			link: $panel-header-link,
		),

		panel-body: (
			padding: $panel-body-padding-y $panel-body-padding-x,
		),

		panel-footer: (
			border-bottom-left-radius:
				clay-enable-rounded($panel-footer-offset-border-radius),
			border-bottom-right-radius:
				clay-enable-rounded($panel-footer-offset-border-radius),
			border-top: $panel-footer-border-top-width solid transparent,
			padding: $panel-footer-padding-y $panel-footer-padding-x,
		),

		panel-title: (
			font-size: $panel-title-font-size,
			font-weight: $panel-title-font-weight,
			text-transform: $panel-title-text-transform,

			small: (
				font-size: $panel-title-small-font-size,
				margin-left: $panel-title-small-margin-left,
			),
		),
	),
	$panel
);

// Panel Group

$panel-group-panel-margin-bottom: var(
	--panel-group-panel-margin-bottom,
	calc(#{$panel-border-bottom-width} * -1)
) !default;

$panel-group-panel-unstyled: () !default;
$panel-group-panel-unstyled: map-deep-merge(
	(
		margin-bottom: var(--panel-group-panel-unstyled-margin-bottom, 24px),
	),
	$panel-group-panel-unstyled
) !default;

// Panel Group Sm

$panel-group-sm: () !default;
$panel-group-sm: map-deep-merge(
	(
		font-size: var(--panel-group-sm-font-size, 0.875rem),
		panel-header: (
			padding-bottom:
				var(--panel-group-sm-panel-header-padding-bottom, 0.5rem),
			padding-top: var(--panel-group-sm-panel-header-padding-top, 0.5rem),
		),

		panel-title: (
			font-size: var(--panel-group-sm-panel-title-font-size, 0.875rem),
		),

		collapse-icon: (
			top: var(--panel-group-sm-panel-header-collapse-icon-top, 0.6875rem),
		),
	),
	$panel-group-sm
);

$panel-group-sm-panel-unstyled: () !default;
$panel-group-sm-panel-unstyled: map-deep-merge(
	(
		margin-bottom: var(--panel-group-sm-panel-unstyled-margin-bottom, 1rem),
	),
	$panel-group-sm-panel-unstyled
);

// Panel Group Flush

$panel-group-flush-body-margin-bottom: var(
	--panel-group-flush-body-margin-bottom,
	24px
) !default;
$panel-group-flush-body-padding: var(
	--panel-group-flush-body-padding,
	0px
) !default;

$panel-group-flush-collapse-icon-left: var(
	--panel-group-flush-collapse-icon-left,
	auto
) !default;
$panel-group-flush-collapse-icon-right: var(
	--panel-group-flush-collapse-icon-right,
	0px
) !default;

$panel-group-flush-collapse-icon-padding-left: var(
	--panel-group-flush-collapse-icon-padding-left,
	0px
) !default;
$panel-group-flush-collapse-icon-padding-right: var(
	--panel-group-flush-collapse-icon-padding-right,
	24px
) !default;

$panel-group-flush-panel-unstyled: () !default;
$panel-group-flush-panel-unstyled: map-deep-merge(
	(
		margin-bottom: 1.5rem,

		panel-body: (
			margin-bottom: 0rem,
		),
	),
	$panel-group-flush-panel-unstyled
);

// Panel Variants

$panel-secondary-header-link: () !default;

$panel-secondary: () !default;
$panel-secondary: map-deep-merge(
	(
		border-color: var(--panel-secondary-border-color, $gray-300),
		color: var(--panel-secondary-color, $gray-600),
		panel-header: (
			border-color:
				var(--panel-secondary-panel-header-border-color, $gray-300),
			link: $panel-secondary-header-link,
		),

		panel-footer: (
			border-color:
				var(--panel-secondary-panel-footer-border-color, $gray-300),
		),
	),
	$panel-secondary
);

// Panel Unstyled

$panel-unstyled-header-link: () !default;
$panel-unstyled-header-link: map-deep-merge(
	(
		border-radius: 1px,

		focus: (
			box-shadow:
				unquote('0 0 0 4px #{$body-bg}, 0 0 0 6px #{$primary-l0}'),
		),
	),
	$panel-unstyled-header-link
);

$panel-unstyled: () !default;
$panel-unstyled: map-deep-merge(
	(
		background-color: var(--panel-unstyled-background-color, transparent),
		border-radius: var(--panel-unstyled-border-radius, 0),
		border-width: var(--panel-unstyled-border-width, 0),
		margin-bottom: var(--panel-unstyled-margin-bottom, 24px),
		panel-header: (
			border-color:
				var(--panel-unstyled-panel-header-border-color, $gray-500),
			border-radius: var(--panel-unstyled-panel-header-border-radius, 0),
			border-style: var(--panel-unstyled-panel-header-border-style, solid),
			border-width:
				var(--panel-unstyled-panel-header-border-width, 0 0 1px 0),
			padding-left: var(--panel-unstyled-panel-header-padding-left, 0),
			collapsed: (
				border-color:
					var(
						--panel-unstyled-panel-header-collapsed-border-color,
						$gray-500
					),
			),

			link: $panel-unstyled-header-link,
		),

		collapse-icon: (
			right: var(--panel-unstyled-panel-header-collapse-icon-right, 0),
		),

		panel-body: (
			padding: var(--panel-unstyled-panel-body-padding, 16px 0 0.1px 0),
		),

		panel-footer: (
			padding: var(--panel-unstyled-panel-footer-padding, 16px 0 0.1px 0),
		),
	),
	$panel-unstyled
);

$panel-palette: () !default;
$panel-palette: map-deep-merge(
	(
		panel-block: (
			border-color: $gray-400,

			collapse-icon: (
				font-size: inherit,
				top: 1.3125rem,
			),

			panel-header: (
				font-size: 1.25rem,
				line-height: 1.25,
				padding: 1.15625rem 1.25rem,

				'&.collapse-icon': (
					padding-right: 3rem,
				),
			),

			panel-title: (
				font-size: inherit,
				text-transform: none,
			),

			panel-body: (
				padding: 0rem 1.25rem 1.25rem,
			),

			panel-footer: (
				padding: 0rem 1.25rem 1.25rem,
			),
		),

		panel-default: (
			border-width: 0px,

			panel-header: (
				border-radius: clay-enable-rounded(0),
				color: $gray-600,
				font-size: 0.875rem,
				line-height: 1.125rem,
				padding-bottom: 0.40625rem,
				padding-left: 0rem,
				padding-right: 0rem,
				padding-top: 0.40625rem,
				text-transform: uppercase,

				'&.collapse-icon': (
					padding-right: 1.75rem,
				),

				link: (
					border-bottom: 1px solid $gray-400,
				),
			),

			collapse-icon: (
				font-size: inherit,
				right: 0rem,
				top: 0.5rem,
			),

			collapse-icon-middle: (
				collapse-icon: (
					right: 0rem,
				),
			),

			panel-body: (
				padding: 1.25rem 0rem,
			),

			panel-title: (
				font-size: inherit,
			),

			panel-footer: (
				padding: 1.25rem 0rem,
			),
		),
	),
	$panel-palette
);

// Panel Sizes

$panel-sizes: () !default;
$panel-sizes: map-deep-merge(
	(
		'.panel-lg.panel-block': (
			collapse-icon: (
				top: 1.75rem,
			),

			panel-header: (
				font-size: 1.5rem,
				padding: 1.5rem 1.5rem,

				'&.collapse-icon': (
					padding-right: calc(1.5rem * 3),
				),
			),

			panel-body: (
				padding: 0rem 1.5rem 1.5rem,
			),

			panel-footer: (
				padding: 0rem 1.5rem 1.5rem,
			),
		),

		'.panel-sm.panel-block': (
			collapse-icon: (
				top: 0.9375rem,
			),

			panel-header: (
				font-size: 1rem,
				padding: 0.8125rem 1rem,

				'&.collapse-icon': (
					padding-right: calc(1rem * 3),
				),
			),

			panel-body: (
				padding: 0rem 1rem 1rem,
			),

			panel-footer: (
				padding: 0rem 1rem 1rem,
			),
		),

		'.panel-sm.panel-default': (
			collapse-icon: (
				top: 0.375rem,
			),

			panel-header: (
				font-size: 0.75rem,
				line-height: 1,
				padding-bottom: 0.34375rem,
				padding-top: 0.34375rem,

				'&.collapse-icon': (
					padding-right: 1.75rem,
				),
			),
		),
	),
	$panel-sizes
);