@import "./_base-theme.scss";

.ui-datepicker {
	z-index: 100 !important;
	min-width: 290px;
	box-shadow: $shadow-sm-v;

	.modal-open & {
		z-index: $z-index-modal + 1 !important;
	}

	.ui-widget-header {
		border: none;
		background: $co-gray-90;
		select {
			font-weight: $font-regular;
			padding: 0.4rem 0.4rem;
			border: 1px solid $co-gray-60 !important;
		}
	}

	&-prev,
	&-next {
		padding-top: .6rem;
		text-align: center;
		border: none !important;
		background: transparent !important;
		&:after {
			font-family: $font-family-monospace;
		}
		&:hover {
			cursor: pointer;
		}
	}
	&-prev {
		left: 0 !important;
		top: 0 !important;
	}
	&-next {
		right: 0 !important;
		top: 0 !important;
	}

	td {
		> a {
			text-align: center;
			padding: .4em .2em;
			border: none !important;
		}
	}

	.ui-state-default {
		background-color: $co-gray-90;
		&:hover:not(.ui-state-active) {
			background-color: $co-gray-80;
		}
	}
	.ui-state-highlight {
		background: $co-gray-80;
		&:hover:not(.ui-state-active) {
			background-color: $co-gray-70;
		}
	}
	.ui-state-active {
		color: $co-base-1;
		background: $co-alpha;
	}

	.ui-datepicker-buttonpane {
		margin: 0;
		border: none;
		button {
			opacity: 1;
			color: $text-color !important;
			font-weight: $font-regular;
			border-color: transparent;
			background-color: $co-gray-90;
			&:hover {
				background-color: $co-gray-80;
			}
		}
	}
}

html[data-theme="dark"] {
	.ui-datepicker {
		color: var(--co-theme-0);
		background: var(--co-gray-80);
		border-color: var(--co-gray-60);
		.ui-widget-header {
			background: var(--co-gray-80);
			a {
				color: var(--co-theme-0);
			}
			select {
				color: var(--co-theme-0);
				background-color: var(--co-gray-80);
				border-color: var(--co-gray-60) !important;
			}

		}
		.ui-datepicker-title {
			color: var(--co-theme-0);
		}
		.ui-state-default:not(.ui-state-active) {
			color: var(--co-theme-0) !important;
			background-color: var(--co-gray-70);
			&.ui-state-hover {
				background-color: var(--co-gray-90);
			}
		}
		.ui-state-default.ui-state-highlight {
			background-color: var(--co-gray-80) !important;
		}
	}

	.ui-widget.ui-widget-content {
		border: 1px solid var(--co-gray-70);
	}
	.ui-widget-content {
		border: 1px solid var(--co-gray-70);
		background: var(--co-gray-90);
		color: var(--text-color);
	}

	.ui-state-active,
	.ui-widget-content .ui-state-active,
	.ui-widget-header .ui-state-active,
	a.ui-button:active,
	.ui-button:active,
	.ui-button.ui-state-active:hover {
		background: var(--co-gray-70);
	}
}