// Date Picker Dropdown Menu

$date-picker-dropdown-menu: () !default;
$date-picker-dropdown-menu: map-deep-merge(
	(
		max-height: none,
		max-width: 370px,
		padding-bottom: 0,
		padding-left: 0,
		padding-right: 0,
		padding-top: 0,
		width: 100%,
		media-breakpoint-down: (
			xs: (
				font-size: 0.75rem,
				margin: 0,
				max-height: 255px,
				max-width: 264px,
			),
		),
	),
	$date-picker-dropdown-menu
);

// Date Picker Nav

$date-picker-nav-row: () !default;
$date-picker-nav-row: map-deep-merge(
	(
		display: flex,
		margin-left: -0.125rem,
		margin-right: -0.125rem,
	),
	$date-picker-nav-row
);

$date-picker-nav-btn: () !default;
$date-picker-nav-btn: map-deep-merge(
	(
		color: $gray-600,
		transition: $component-transition,
		hover: (
			background-color: $gray-200,
		),
		focus: (
			box-shadow: $component-focus-box-shadow,
		),
		disabled: (
			background-color: transparent,
			box-shadow: none,
			color: $gray-600,
			opacity: $component-disabled-opacity,
		),
	),
	$date-picker-nav-btn
);

$date-picker-nav-btn-monospaced: () !default;
$date-picker-nav-btn-monospaced: map-deep-merge(
	(
		margin-bottom: 0,
		margin-left: 0.125rem,
		margin-right: 0.125rem,
		margin-top: 0,
		media-breakpoint-down: (
			xs: (
				font-size: 0.75rem,
				height: 1.5rem,
				max-height: 1.5rem,
				max-width: 1.5rem,
				min-width: 1.5rem,
			),
		),
	),
	$date-picker-nav-btn-monospaced
);

$date-picker-nav-select: () !default;
$date-picker-nav-select: map-deep-merge(
	(
		media-breakpoint-down: (
			xs: (
				font-size: 0.75rem,
				height: 1.5rem,
			),
		),
	),
	$date-picker-nav-select
);

// Date Picker Row

$date-picker-row: () !default;
$date-picker-row: map-deep-merge(
	(
		display: flex,
		justify-content: space-between,
		list-style: none,
		margin-bottom: 0.5rem,
		margin-top: 0.5rem,
		padding: 0,
		media-breakpoint-down: (
			xs: (
				margin-bottom: 0.25rem,
				margin-top: 0.25rem,
			),
		),
	),
	$date-picker-row
);

$date-picker-col: () !default;
$date-picker-col: map-deep-merge(
	(
		display: flex,
		flex-grow: 1,
		justify-content: center,
		c-selected: (
			background-image: linear-gradient($primary-l3, $primary-l3),
			background-repeat: no-repeat,
		),
		c-selected-first-child: (
			border-bottom-left-radius: 100px,
			border-top-left-radius: 100px,
		),
		c-selected-last-child: (
			border-bottom-right-radius: 100px,
			border-top-right-radius: 100px,
		),
		c-selected-start: (
			background-position: right top,
			background-size: 50% 100%,
		),
		c-selected-end: (
			background-position: left top,
			background-size: 50% 100%,
		),
	),
	$date-picker-col
);

$date-picker-days-row: () !default;
$date-picker-days-row: map-deep-merge(
	(
		margin-bottom: 1rem,
		margin-top: 0,
		media-breakpoint-down: (
			xs: (
				margin-bottom: 0.25rem,
			),
		),
	),
	$date-picker-days-row
);

$date-picker-date-row: () !default;

// Date Picker Day

$date-picker-day: () !default;
$date-picker-day: map-deep-merge(
	(
		height: 1.3125rem,
	),
	$date-picker-day
);

// Date Picker Calendar

$date-picker-calendar-container: () !default;
$date-picker-calendar-container: map-merge(
	(
		float: left,
		min-width: 100%,
	),
	$date-picker-calendar-container
);

$date-picker-calendar-header-container: () !default;
$date-picker-calendar-header-container: map-merge(
	(
		padding-bottom: 1rem,
		padding-left: 1rem,
		padding-right: 1rem,
		padding-top: 1rem,
		media-breakpoint-down: (
			xs: (
				padding-bottom: 0.25rem,
				padding-left: 0.375rem,
				padding-right: 0.375rem,
				padding-top: 0.5rem,
			),
		),
	),
	$date-picker-calendar-header-container
);

$date-picker-calendar-body-container: () !default;
$date-picker-calendar-body-container: map-merge(
	(
		padding-left: 0.5rem,
		padding-right: 0.5rem,
		padding-bottom: 0.5rem,
		media-breakpoint-down: (
			xs: (
				padding-left: 0.375rem,
				padding-right: 0.375rem,
				padding-bottom: 0.25rem,
			),
		),
	),
	$date-picker-calendar-body-container
);

$date-picker-calendar-footer-container: () !default;
$date-picker-calendar-footer-container: map-merge(
	(
		border-color: $gray-400,
		border-style: solid,
		border-width: 1px 0 0 0,
		padding-bottom: 0.5rem,
		padding-left: 0.875rem,
		padding-right: 0.875rem,
		padding-top: 0.5rem,
		media-breakpoint-down: (
			xs: (
				padding-left: 0.375rem,
				padding-right: 0.375rem,
				padding-top: 0.4375rem,
			),
		),
	),
	$date-picker-calendar-footer-container
);

// Date Picker Calendar Item

$date-picker-calendar-item: () !default;
$date-picker-calendar-item: map-deep-merge(
	(
		align-items: center,
		background-color:
			setter(map-get($date-picker-calendar-item, bg) transparent),
		border-width: 0px,
		disabled-cursor: $disabled-cursor,
		display: inline-flex,
		flex-shrink: 0,
		font-weight: $font-weight-semi-bold,
		height: 2rem,
		justify-content: center,
		line-height: 1,
		margin-left: 0,
		margin-right: 0,
		padding-bottom: 0,
		padding-left: 0,
		padding-right: 0,
		padding-top: 0,
		transition: $component-transition,
		user-select: none,
		vertical-align: middle,
		white-space: nowrap,
		width: 2rem,
		media-breakpoint-down: (
			xs: (
				height: 1.5rem,
				width: 1.5rem,
			),
		),
	),
	$date-picker-calendar-item
);

$date-picker-date: () !default;
$date-picker-date: map-deep-merge(
	(
		border-radius: 100px,
		color: $gray-600,
		cursor: $link-cursor,
		position: relative,
		hover: (
			background-color: $gray-200,
		),
		focus: (
			box-shadow: $component-focus-box-shadow,
			outline: 0,
		),
		active: (
			background-color: $component-active-bg,
			color: $component-active-color,
		),
		disabled: (
			background-color: transparent,
			box-shadow: none,
			opacity: $component-disabled-opacity,
		),
	),
	$date-picker-date
);

$date-picker-previous-month-date: () !default;
$date-picker-previous-month-date: map-deep-merge(
	(
		opacity: 0.65,
		focus: (
			opacity: 1,
		),
		active: (
			background-color: $primary-l1,
			color: $primary-l3,
		),
	),
	$date-picker-previous-month-date
);

$date-picker-next-month-date: () !default;
$date-picker-next-month-date: map-deep-merge(
	(
		opacity: 0.65,
		focus: (
			opacity: 1,
		),
		active: (
			background-color: $primary-l1,
			color: $primary-l3,
		),
	),
	$date-picker-next-month-date
);

// Date Picker Input Group

$date-picker-input-group-item: () !default;
$date-picker-input-group-item: map-deep-merge(
	(
		margin-left: 0.125rem,
	),
	$date-picker-input-group-item
);

$date-picker-input-group-text: () !default;
$date-picker-input-group-text: map-deep-merge(
	(
		background-color:
			setter(map-get($date-picker-input-group-text, bg) transparent),
		border-color: transparent,
		min-width: 2rem,
		padding-left: 0.25rem,
		padding-right: 0.25rem,
		media-breakpoint-down: (
			xs: (
				font-size: inherit,
				height: $input-height-sm,
				min-width: 1.5rem,
			),
		),
	),
	$date-picker-input-group-text
);

$date-picker-input-form-control: () !default;
$date-picker-input-form-control: map-deep-merge(
	(
		media-breakpoint-down: (
			xs: (
				border-radius: clay-enable-rounded($input-border-radius-sm),
				font-size: $input-font-size-sm,
				height: $input-height-sm,
				line-height: $input-line-height-sm,
				min-height: $input-height-sm,
				padding-bottom: $input-padding-y-sm,
				padding-left: $input-padding-x-sm,
				padding-right: $input-padding-x-sm,
				padding-top: $input-padding-y-sm,
			),
		),
	),
	$date-picker-input-form-control
);