@import "@wordpress/base-styles/breakpoints";

$date-range-shortcut-min-width: 140px;
$date-range-mobile-layout-switch: $break-small;

.date-range {
	position: relative;
	display: flex;
	align-items: baseline;
}

.date-range__trigger-btn {
	text-align: left; // required to avoid content "jumping" as date text changes

	.toggle-visible & {
		box-shadow: none;
		background-color: var(--color-neutral-0);
	}

	.gridicons-chevron-down {
		fill: var(--color-neutral-50);
		margin: 0 0 0 5px;
		flex-shrink: 0;
		transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);

		.is-disabled & {
			fill: var(--color-neutral-5);
		}

		.toggle-visible & {
			transform: rotate(-180deg);
		}
	}
}

.date-range__trigger-btn-icon {
	margin-right: 0.5em; // more consistent spacing between "compact" & "non-compact" states
}

.date-range__trigger-btn-text {
	// required to avoid content "jumping" as date text changes see:
	// https://github.com/Automattic/wp-calypso/pull/29938
	// https://github.com/Automattic/wp-calypso/pull/29938#pullrequestreview-194065929
	min-width: 15em;
	display: inline-block;
}

.date-range__popover-inner {
	display: flex; // required for content ordering
	flex-direction: column;
	padding: 15px;
	margin: 0 auto;

	@include breakpoint-deprecated( "<480px" ) {
		max-width: 300px;
	}

	&.date-range__popover-inner__hasoverlay {
		position: relative;
		.date-range__controls,
		.date-range__date-inputs,
		.date-range__picker,
		.date-range__popover-header,
		.date-range__popover-footer {
			filter: blur(10px);
			z-index: 0;
		}
		.date-range__popover-inner-overlay {
			position: absolute;
			z-index: 1;
			height: calc(100% - 30px);
			width: calc(100% - 30px);

			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.DayPicker-Week {
		border-bottom: 4px solid var(--color-surface);
	}
}

.date-range__controls {
	order: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;

	@include breakpoint-deprecated( ">480px" ) {
		flex-direction: row;
	}
}

.date-range__custom-title {
	font-weight: 500;
	font-size: $font-body;
}

.date-range__popover-header {
	order: 1;
	display: flex;
	justify-content: left;
}

.date-range__popover-footer {
	order: 4;
	display: flex;
	justify-content: flex-end;
	padding: 10px 0 0;

	.components-button {
		margin-left: 0.5em;
	}
	margin-top: 10px;

	@media (max-width: $date-range-mobile-layout-switch) {
		flex-direction: column-reverse;
		align-items: stretch;

		.components-button {
			margin-top: 0.5em;
			justify-content: center;
		}
	}
}

.date-range__info {
	order: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5em 0;

	// ensures `em` element retains whitespace
	// https://stackoverflow.com/questions/39325039/css-flex-box-last-space-removed
	white-space: pre-wrap;

	@include breakpoint-deprecated( "<480px" ) {
		margin-bottom: 0.5em;
	}

	// Match "naked" button and text styles
	// to avoid small jumps in UI on date select
	&,
	.button {
		padding: 0;
		font-size: $font-body-extra-small;
		font-weight: 600;
		line-height: 18px;
	}

	.button {
		color: var(--color-link);

		&:hover,
		&:focus {
			color: var(--color-accent);
		}
	}

	.gridicon {
		margin-right: 0.5em;
	}
}

.date-range__popover {
	.DayPicker {
		order: 3;
	}

	.DayPicker-wrapper,
	.DayPicker-Months {
		display: flex;
	}

	.DayPicker-Caption {
		font-size: $font-body-extra-small;
	}
}

.date-range__popover .date-picker--1up {
	.DayPicker-wrapper,
	.DayPicker-Months {
		flex-direction: column;
	}

	.DayPicker-Month {
		width: 100%;
	}
}

.date-range__popover-content .date-picker {

	display: flex;
	justify-content: center; /* Centers horizontally */
	align-items: center;     /* Centers vertically */

}

.date-range__popover .date-picker--2up {

	.DayPicker-wrapper,
	.DayPicker-Months {
		flex-direction: row;
	}

	.DayPicker-Month {
		width: auto;
		margin-right: 1em;

		&:last-child {
			margin-left: 1em;
			margin-right: 0;
		}
	}
}

.date-range__date-inputs {
	order: 2;
	margin-bottom: 0;
}

.date-range__date-inputs-inner {
	display: flex;
	text-align: left;
	padding-top: 10px;
}

.date-range__date-inputs-legend {
	@include hide-content-accessibly();
}

.date-range__date-input {
	flex: 1;
	max-width: 224px;

	.form-label {
		font-size: $font-body-extra-small;
		text-transform: uppercase;
		margin-bottom: 0;
	}

	input {
		font-size: $font-body-small;
		padding: 3px 10px;
	}
}


.date-range__date-input--from {
	margin-right: 1em;
}

.date-range__date-input--to {
	margin-left: 1em;
}


.date-range__picker {
	--date-range-picker-highlight-color: color-mix(in srgb, var(--color-primary-light) 40%, transparent);

	.DayPicker-Day,
	.DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside),
	.DayPicker-Day--range:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
		line-height: initial;
		padding: 0.25em; // fix and allow target area
		width: 24px; // fix and allow target area
		height: 24px; // fix and allow target area
	}

	.DayPicker-Day {
		.date-picker__day {
			&:hover,
			&:focus {
				color: var(--color-text-inverted);
				background-color: var(--date-range-picker-highlight-color);
			}
		}
	}

	.DayPicker-Day--range .date-picker__day {
		color: var(--color-text);
		background-color: var(--date-range-picker-highlight-color);
	}

	.DayPicker-Day--start.DayPicker-Day--range-start,
	.DayPicker-Day--end.DayPicker-Day--range-end {
		& .date-picker__day {
			color: var(--color-text-inverted);
			background-color: var(--color-primary);
		}
		&:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
			border-radius: 200px; /* stylelint-disable-line scales/radii */
			&.DayPicker-Day--range {
				background-color: var(--color-primary);
				.date-picker__day {
					&:hover,
					&:focus {
						background-color: var(--date-range-picker-highlight-color);
					}
				}
			}
		}
	}
	.DayPicker-Day--range:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
		background-color: var(--date-range-picker-highlight-color);
		.date-picker__day {
			background-color: transparent;
		}
	}

	&.date-picker--range-selected {
		.DayPicker-Day--start:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
			border-top-left-radius: 200px; /* stylelint-disable-line scales/radii */
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
			border-bottom-left-radius: 200px; /* stylelint-disable-line scales/radii */
		}

		.DayPicker-Day--end:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
			border-top-right-radius: 200px; /* stylelint-disable-line scales/radii */
			border-bottom-right-radius: 200px; /* stylelint-disable-line scales/radii */
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
		}

	}

	.DayPicker-Day--start.DayPicker-Day--end {
		/* stylelint-disable-next-line scales/radii */
		border-radius: 200px !important;
	}
}
.date-range__popover-content { // Styling to fit optional shortcuts sidebar
	display: flex;
	align-items: stretch; // Ensure children stretch to full height

	@media (min-width: $date-range-mobile-layout-switch) {
		flex-direction: row; // Align items in a row on larger screens
	}

	@media (max-width: $date-range-mobile-layout-switch) {
		flex-direction: column-reverse; // Stack items vertically on small screens
	}
}

.date-range-picker-shortcuts {
	padding: 16px;
	border-left: 1px solid var(--gray-gray-5, #dcdcde);
	box-sizing: border-box;

	@media (max-width: $date-range-mobile-layout-switch) {
		border-left: 0 none;
		border-bottom: 1px solid var(--gray-gray-5, #dcdcde);
		display: block; // Ensure it takes full width on mobile
	}

	@media (min-width: $date-range-mobile-layout-switch) {
		// Adjust layout for larger screens
		flex: 0 0 auto; // Allow it to take only necessary space
	}
}

.date-range-picker-shortcuts__list {
	list-style: none;
	margin: 0;
}

.date-range-picker-shortcuts__shortcut {
	border-radius: 2px;
	min-width: $date-range-shortcut-min-width;


	&:hover {
		background-color: var(--color-primary-0);
	}

	& + & {
		margin-top: 2px; // space for an outline for the current item and hover for the next
	}

	&.is-selected {
		background-color: var(--color-accent-5);
	}

	.components-button {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}
}
