@use '../../../../admin/assets/design/scss/_variables.scss' as *;

.adpresso-calendar-popover {
	border-radius: .4em;
	padding: 2em;
	min-width: 600px;

	/* 2 month next to each other 50/50 */
	.rdp-months {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1em;
		align-items: flex-start;
	}

	.rdp-month {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-rows: auto auto;
		align-items: flex-start;
		column-gap: 1em;
		row-gap: 1em;

		.rdp-month_caption {
			grid-column: 1;
			grid-row: 1;
		}

		> button {
			grid-column: 2;
			grid-row: 1;
			justify-self: end;
			padding: 0.75em;
			border: none;
		}

		.rdp-month_grid {
			grid-column: 1 / -1;
			grid-row: 2;
		}

		.rdp-dropdowns {
			display: flex;
			gap: 1em;
			select.adpresso-select-button {
				font-size: 1em;
				color: $color-text;
				width: auto;
				display: inline-block;
				padding-right: 2em;
			}
			.rdp-caption_label {
				display: none;
			}
		}
	}

	.rdp-month:last-of-type {
		.rdp-month_caption {
			grid-column: 2;
			line-height: 3em;
		}
		> button {
			grid-column: 1;
			justify-self: start;
		}
		.rdp-dropdowns {
			display: flex;
			flex-direction: row;
			height: 2em;
			gap: 0.4em;
			select {
				display: none;
			}
			.rdp-caption_label {
				display: block;
				> svg {
					display: none;
				}
			}
		}
	}

	.rdp-weekdays {
		color: $color-icon;
		height: 2em;
	}

	button.rdp-day_button {
		background: none;
		border: none;
		color: $color-text;
	}

	.rdp-day {
		text-align: center;

		button {
			cursor: pointer;
			aspect-ratio: 1 / 1;
			width: 100%;
		}

		&.rdp-selected {
			background-color: $color-primary-superlight;
		}

		&.rdp-range_start,
		&.rdp-range_end {
			background-color: $color-primary;
			border-radius: 0.4em 0 0 0.4em;

			button {
				color: $color-white !important;
			}
		}

		&.rdp-range_end {
			border-radius: 0 0.4em 0.4em 0;
		}

		&.rdp-range_start.rdp-range_end {
			border-radius: 0.4em;
		}

		&.rdp-range_middle {
			background-color: $color-primary-light !important;
			color: $color-text-active !important;
			border-radius: 0 !important;
		}
	}

	.rdp-footer {
		padding: $space-3 $space-4;
		border-top: 0.12em solid $color-divider;
		font-style: italic;
		display: none;
	}

	.adpresso-calendar-popover-footer {
		margin-top: 1em;
		text-align: right;
	}
}