@import "_variable";

@mixin little-flag {
	&:after {
		content: "";
		position: absolute;
		bottom: 100%;
		//--- right of datepicker ---//
		// right: 1.2rem;
		//--- center of datepicker ---//
		/* left: 50%; transform: translateX(-50%); */
		//--- left of datepicker ---//
		/* left: 1.2rem; */
		border: solid transparent;
		border-bottom-color: $background;
		border-bottom-color: var(--background);
		border-width: 0.4rem;
	}
}

@mixin scrollbar {
	&::-webkit-scrollbar {
		-webkit-appearance: none;
	}
	&::-webkit-scrollbar:vertical {
		width: 0.4rem;
	}
	&::-webkit-scrollbar-thumb {
		border-radius: $radius;
		border-radius: var(--radius);
		border: 0.1rem solid white; /* should match background, can't be transparent */
		background: $border-color;
		background: var(--border-color);
	}
}

@keyframes start {
	from {
		transform: scale(0.5);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes startModal {
	from {
		transform: translate(-50%, -50%) scale(0.5);
		opacity: 0;
	}
	to {
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
	}
}

@keyframes tada {
	0% {
		transform: scale(1);
	}
	10%,
	20% {
		transform: scale(0.9) rotate(-3deg);
	}
	30%,
	50%,
	70%,
	90% {
		transform: scale(1.1) rotate(3deg);
	}
	40%,
	60%,
	80% {
		transform: scale(1.1) rotate(-3deg);
	}
	100% {
		transform: scale(1) rotate(0);
	}
}

@media (max-width: 700px) {
	.pdp-picker {
		flex-direction: column-reverse;
	}

	.pdp-shortcut {
		flex-direction: row !important;
		flex-wrap: wrap;
		justify-content: space-evenly;
		padding: 0 !important;
		border: none !important;
	}
}

.pdp {
	position: relative;

	&:not(.pdp-range) .pdp-day.start-range {
		border-radius: $radius !important;
		border-radius: var(--radius) !important;
	}

	&.pdp-range .pdp-picker.rtl .pdp-day.start-range {
		border-radius: 0 $radius $radius 0 !important;
		border-radius: 0 var(--radius) var(--radius) 0 !important;
	}

	&.pdp-range .pdp-picker.rtl .pdp-day.end-range {
		border-radius: $radius 0 0 $radius !important;
		border-radius: var(--radius) 0 0 var(--radius) !important;
	}

	&.pdp-range .pdp-picker.rtl .pdp-day.end-range.start-range {
		border-radius: $radius !important;
		border-radius: var(--radius) !important;
	}

	&.pdp-range .pdp-picker.ltr .pdp-day.start-range {
		border-radius: $radius 0 0 $radius !important;
		border-radius: var(--radius) 0 0 var(--radius) !important;
	}

	&.pdp-range .pdp-picker.ltr .pdp-day.end-range {
		border-radius: 0 $radius $radius 0 !important;
		border-radius: 0 var(--radius) var(--radius) 0 !important;
	}

	&.pdp-range .pdp-picker.ltr .pdp-day.end-range.start-range {
		border-radius: $radius !important;
		border-radius: var(--radius) !important;
	}

	&.rtl {
		direction: rtl;
		text-align: right;

		.pdp-group {
			:first-child {
				border-top-right-radius: $radius;
				border-top-right-radius: var(--radius);
				border-bottom-right-radius: $radius;
				border-bottom-right-radius: var(--radius);
				margin-right: -1px;
			}

			input {
				border-top-left-radius: $radius;
				border-top-left-radius: var(--radius);
				border-bottom-left-radius: $radius;
				border-bottom-left-radius: var(--radius);
			}
		}

		.pdp-picker::after {
			right: 1.2rem;
		}
	}

	&.ltr {
		direction: ltr;
		text-align: left;

		.pdp-group {
			:first-child {
				border-top-left-radius: $radius;
				border-top-left-radius: var(--radius);
				border-bottom-left-radius: $radius;
				border-bottom-left-radius: var(--radius);
				margin-right: -1px;
			}

			input {
				border-top-right-radius: $radius;
				border-top-right-radius: var(--radius);
				border-bottom-right-radius: $radius;
				border-bottom-right-radius: var(--radius);
				font-family: sans-serif;
			}

			.pdp-clear {
				left: unset;
				right: 0.45rem;
			}
		}

		.pdp-picker::after {
			left: 1.2rem;
		}
	}

	&.pdp-modal {
		.pdp-overlay {
			background: rgba(0, 0, 0, 0.5) !important;
		}

		.pdp-picker {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			animation: startModal 0.1s;

			&::after {
				all: unset !important;
			}
		}
	}

	* {
		box-sizing: border-box;
	}

	svg {
		vertical-align: middle;
	}

	input,
	button {
		font-family: inherit;
	}

	.pdp-label {
		display: inline-block;
		margin-bottom: 0.5rem;
	}

	.pdp-group {
		position: relative;
		display: flex;
		align-items: stretch;
		width: 100%;

		.pdp-input {
			display: block;
			height: calc(1.5em + 0.75rem + 2px);
			padding: 0.375rem 0.75rem;
			font-size: 1rem;
			font-weight: 400;
			line-height: 1.5;
			background-clip: padding-box;
			border: 1px solid $border-color;
			border: 1px solid var(--border-color);
			transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
			position: relative;
			flex: 1 1 auto;
		}

		.pdp-icon {
			padding: 0.375rem 0.75rem;
			line-height: 1.5;
			font-size: 1rem;
			color: $text-color;
			color: var(--text-color);
			background: $icon-background;
			background: var(--icon-background);
			border: 1px solid $border-color;
			border: 1px solid var(--border-color);
		}

		.pdp-clear {
			border: none;
			background-color: transparent;
			position: absolute;
			left: 0.45rem;
			top: 0.45rem;
			z-index: 1;
			cursor: pointer;
			padding: 0 0.5rem;
		}
	}

	.pdp-overlay {
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		z-index: $z-index;
		z-index: var(--z-index);
		background: $overlay-color;
		background: var(--overlay-color);
	}

	.pdp-picker {
		display: flex;
		position: absolute;
		color: $text-color;
		color: var(--text-color);
		background: $background;
		background: var(--background);
		box-shadow: $main-box-shadow;
		box-shadow: var(--main-box-shadow);
		z-index: $z-index + 1;
		z-index: calc(var(--z-index) + 1);
		border-radius: $radius;
		border-radius: var(--radius);
		transition: all 1s ease;
		margin-top: 0.5rem;
		padding: 0.3rem 0.6rem;
		animation: start 0.1s;

		&.ltr {
			direction: ltr;

			.pdp-header .bottom {
				flex-direction: row-reverse;

				& > div {
					display: flex;
					flex-direction: row-reverse;
				}
			}

			.pdp-select-year,
			.pdp-days,
			.pdp-header .pdp-year,
			.pdp-footer small,
			.pdp-time {
				font-family: sans-serif !important;
			}

			.pdp-shortcut {
				border-right: unset;
				border-left: 1px solid $border-color;
				border-left: 1px solid var(--border-color);
			}
		}

		&.rtl {
			direction: rtl;
		}

		&.pdp-top {
			bottom: calc(1.5em + 0.75rem + 2px);
			margin-top: unset;
			margin-bottom: 0.5rem;

			&::after {
				bottom: unset;
				top: 100%;
				transform: rotate(180deg);
			}
		}

		&.pdp-left {
			left: 0;
			right: unset;

			&::after {
				right: unset;
				left: 1.2rem;
			}
		}

		&.pdp-right {
			left: unset;
			right: 0;

			&::after {
				left: unset;
				right: 1.2rem;
			}
		}

		@include little-flag();

		::selection {
			all: unset;
		}

		.pdp-auto {
			&,
			& > div {
				background: inherit;
			}
		}

		.pdp-select-year,
		.pdp-select-month {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			font-size: 0.8rem;
			background: inherit;
			list-style: none;
			position: absolute;
			left: 0;
			right: 0;
			top: 3.5rem;
			bottom: 3.5rem;
			padding: 0;
			margin: 0;
			z-index: 1;
			animation: start 0.1s;
			overflow: auto;

			li {
				width: 5rem;
				height: 4rem;
				padding: 0.2rem;
				cursor: pointer;
				margin: 0.15rem;
				display: inline-flex;
				justify-content: center;
				align-items: center;
				flex: 30% 0;

				&:not(.disabled):hover {
					border-radius: $radius;
					border-radius: var(--radius);
					border: 2px solid $primary-color;
					border: 2px solid var(--primary-color);
				}

				&.disabled {
					text-shadow: unset;
					box-shadow: unset;
					cursor: default !important;
					opacity: $disabled-opacity;
					opacity: var(--disabled-opacity);
				}

				&.selected {
					border: 2px solid $primary-color;
					border: 2px solid var(--primary-color);
					border-radius: $radius;
					border-radius: var(--radius);
					background: $primary-color !important;
					background: var(--primary-color) !important;
					color: $background;
					color: var(--background);
				}
			}

			@include scrollbar();
		}

		.pdp-header {
			& > div:first-child {
				border-bottom: 1px solid $border-color;
				border-bottom: 1px solid var(--border-color);
				margin-bottom: 0.5rem;
			}

			.top {
				padding: 0.75rem 0.3rem 1rem 0.3rem;
				display: flex;
				justify-content: space-between;
				font-size: 0.9rem;
				direction: rtl;

				button {
					border: 0;
					background: inherit;
					cursor: pointer;
					color: $primary-color;
					color: var(--primary-color);
					padding: 0 0.5rem;
				}
			}

			.bottom {
				padding: 0.3rem;
				display: flex;
				align-items: center;
				height: 3rem;
				direction: rtl;

				& > div {
					display: flex;
					flex-grow: 1;
					justify-content: space-around;

					.pdp-month,
					.pdp-year {
						color: $primary-color;
						color: var(--primary-color);
						font-size: 1rem;
					}
				}

				button {
					border: 0;
					background: inherit;
					cursor: pointer;

					&:focus {
						outline: 0;
					}
				}

				.pdp-arrow.disabled {
					opacity: $disabled-opacity;
					opacity: var(--disabled-opacity);
				}

				.pdp-arrow:not(.disabled):hover {
					opacity: $disabled-opacity;
					opacity: var(--disabled-opacity);
				}
			}
		}

		.pdp-main {
			position: relative;

			.pdp-date {
				display: flex;
				justify-content: center;

				.pdp-column {
					margin: 0 1rem;

					.pdp-week {
						background: inherit;
						margin-bottom: 0.3rem;
						display: flex;
						justify-content: space-around;

						.pdp-weekday {
							width: $day-dimensions;
							width: var(--day-dim$day-dimensions);
							height: $day-dimensions;
							height: var(--day-dim$day-dimensions);
							line-height: $day-dimensions;
							line-height: var(--day-dim$day-dimensions);
							font-size: 0.8rem;
							text-align: center;
						}
					}

					.pdp-days {
						background: inherit;

						.pdp-day {
							display: inline-flex;
							justify-content: center;
							align-items: center;
							margin: 0.1rem 0;
							font-size: 0.8rem;
							width: $day-dimensions;
							width: var(--day-dim$day-dimensions);
							height: $day-dimensions;
							height: var(--day-dim$day-dimensions);
							border-radius: $radius;
							border-radius: var(--radius);
							padding: 0;
							cursor: pointer;
							transition-property: background-color, box-shadow;
							transition-duration: 0.1s;
							contain: content;

							&.friday {
								color: $primary-color;
								color: var(--primary-color);
							}

							&.empty {
								visibility: hidden;
							}

							&.start-range,
							&.end-range {
								background: $primary-color;
								background: var(--primary-color);
								color: $background;
								color: var(--background);
							}

							&.disabled {
								box-shadow: unset;
								text-shadow: unset;
								cursor: default !important;
								border-color: transparent;
								opacity: $disabled-opacity;
								opacity: var(--disabled-opacity);
							}

							&.hover {
								background: $secondary-color !important;
								background: var(--secondary-color) !important;
								color: $hover-color;
								color: var(--hover-color);
							}

							&.in-range {
								background: $in-range-background;
								background: var(--in-range-background);
								color: $hover-color;
								color: var(--hover-color);
								border-radius: 0 !important;
							}

							&:not(.disabled):hover,
							&.today {
								border: 2px solid $primary-color;
								border: 2px solid var(--primary-color);
							}

							&.tada {
								animation: tada 1s;
								background: $secondary-color;
								background: var(--secondary-color);
								box-shadow: inset 0 4px 9px rgba(0, 0, 0, 0.24);
								color: #000;
								position: relative;
								z-index: 1;
							}
						}
					}
				}
			}

			.pdp-time {
				background: inherit;

				&:not(.inline) {
					position: absolute;
					top: 0;
					bottom: 0;
					right: 0;
					left: 0;
				}

				.pdp-column {
					display: flex;

					div {
						width: 16.6rem;
					}
				}

				.pdp-moment {
					margin-bottom: 1rem;
					font-size: calc(2rem * #{$time-scale});
					font-size: calc(2rem * var(--time-scale));
					display: flex;
					justify-content: space-around;
					height: 100%;

					&.column-direction {
						flex-direction: column;
					}

					> div {
						display: flex;
						justify-content: center;
						align-items: center;
						direction: ltr;
						width: 100%;
						padding: 1rem 0;

						&.disabled {
							opacity: $disabled-opacity;
							opacity: var(--disabled-opacity);
						}

						div {
							display: flex;
							flex-direction: column;
							align-items: center;
							padding: 0 0.8rem;

							button {
								border: none;
								background: none;
								cursor: pointer;

								svg {
									width: calc(8px * #{$time-scale});
									width: calc(8px * var(--time-scale));
								}
							}
						}
					}
				}
			}
		}

		.pdp-footer {
			text-align: center;
			min-height: 3rem;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-top: 1px solid $border-color;
			border-top: 1px solid var(--border-color);
			padding: 0.3rem;

			.pdp-today,
			.pdp-submit {
				font-size: 0.8rem;
				padding: 0.25rem 0.5rem;
				margin: 0 0.3rem;
				line-height: 1.5;
				color: $background;
				color: var(--background);
				text-decoration: none;
				border: none;
				border-radius: $radius;
				border-radius: var(--radius);
				background: $primary-color;
				background: var(--primary-color);
				cursor: pointer;

				&:hover {
					filter: brightness(0.9);
				}
			}

			> div {
				display: flex;
			}
		}

		.pdp-shortcut {
			margin: 0;
			padding: 0.5rem;
			list-style: none;
			display: flex;
			flex-direction: column;
			align-items: stretch;
			border-right: 1px solid $border-color;
			border-right: 1px solid var(--border-color);

			li {
				margin: 0;
				padding: 0.5rem 1rem;
				text-align: center;
				cursor: pointer;
				border-radius: $radius;
				border-radius: var(--radius);
				margin: 0.25rem 0;
				color: $hover-color;
				color: var(--hover-color);
				font-weight: 500;

				&:hover {
					background: $in-range-background;
					background: var(--in-range-background);
				}

				&.selected {
					background: $primary-color;
					background: var(--primary-color);
					color: $background;
					color: var(--background);
				}
			}
		}
	}

	.pdp-pointer {
		cursor: pointer;
	}

	.pdp-auto {
		margin: auto;
		position: relative;
	}
}