@include body-class {

	// Single Datepicker.
	#ui-datepicker-div {

		&.sui-calendar {
			margin: 0;
			padding: $calendar-padding;
			border-width: $calendar-border--width;
			border-style: $calendar-border--style;
			border-color: $calendar-border--color;
			border-radius: $calendar-border--radius;
			background-color: $calendar-background;
			box-shadow: $calendar-shadow;

			* {
				box-sizing: border-box;
				font-variant-ligatures: none;
				-webkit-font-variant-ligatures: none;
				text-rendering: optimizeLegibility;
				-moz-osx-font-smoothing: grayscale;
				font-smoothing: antialiased;
				-webkit-font-smoothing: antialiased;
				text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
			}

			.ui-datepicker-header {
				display: block;
				position: relative;

				.ui-corner-all {
					width: $calendar-cell;
					height: $calendar-cell;
					cursor: pointer;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					position: absolute;
					top: 0;
					margin: 0;
					padding: 0;
					border: 0;
					border-radius: $border-radius;
					background-color: transparent;
					transition: 0.3s ease;

					&:before {
						display: block;
						color: palette(gray, light);
					}

					span {
						display: none;
					}

					&:hover,
					&:active {
						background-color: palette(silver, default);

						&:before {
							color: palette(gray, dark);
						}
					}

					&.ui-datepicker-prev {
						@include icon(before, chevron-left, true);
						left: 0;
					}

					&.ui-datepicker-next {
						@include icon(before, chevron-right, true);
						right: 0;
					}

					// STATE: Disabled.
					&.ui-state-disabled {
						opacity: 0.5;
					}
				}

				.ui-datepicker-title {
					display: block;
					padding: 0 40px;
					color: $month-color;
					font-size: $month-size;
					line-height: $month-height;
					font-family: $month-family;
					font-weight: $month-weight;
					letter-spacing: $month-spacing;
					text-align: $month-align;
				}
			}

			.ui-datepicker-calendar {
				margin: 5px 0 0;
				border-collapse: collapse;

				thead tr,
				tbody tr {

					th, td {
						width: 30px;
						height: 30px;
						margin: 0;
						padding: 0;
						border: 0;
						text-align: center;

						a, span {
							display: block;
							margin: 0;
							padding: 0;
							border: 0;
							text-decoration: none;
							line-height: 30px;
							font-family: $font;
						}
					}
				}

				thead tr {

					th {
						height: calc(#{$calendar-padding} + 5px);
						padding-bottom: 5px;
						color: $month-color;
						font-size: $month-size;
						line-height: $month-height;
						font-family: $month-family;
						font-weight: $month-weight;
						letter-spacing: $month-spacing;
					}
				}

				tbody tr {

					td {
						color: $day-default--color;

						&, a, span {
							border-radius: $border-radius;
							font-size: $day-size;
							line-height: $day-height;
							font-family: $day-family;
							font-weight: $day-weight;
							letter-spacing: $day-spacing;
						}

						// OPTION: Default.
						a.ui-state-default {
							background-color: $day-default--background;
							color: $day-default--color;
							transition: $transition;

							&.ui-state-hover {
								background-color: $day-hover--background;
								color: $day-hover--color;
							}

							&.ui-state-active {
								background-color: $day-active--background;
								color: $day-active--color;
							}
						}

						// OPTION: Today.
						&.ui-datepicker-today {

							a.ui-state-default {
								background-color: $day-today--background;
								color: $day-today--color;

								&.ui-state-active {
									background-color: $day-active--background;
									color: $day-active--color;
								}
							}
						}

						// OPTION: Disabled.
						&.ui-state-disabled {
							background-color: $day-inactive--background;
							color: $day-inactive--color;

							a, span {
								background-color: $day-inactive--background;
								color: $day-inactive--color;
								text-decoration: line-through;
							}
						}
					}
				}
			}
		}
	}
}

@include body-class(false) {
	&.sui-elements-accessible {
		#ui-datepicker-div {
			&.sui-calendar {
				.ui-datepicker-calendar {
					tbody tr {
						td {
							// OPTION: Default.
							a.ui-state-default {

								&.ui-state-active {
									background-color: $nightrider;
									color: $white;
								}
							}

							// OPTION: Today.
							&.ui-datepicker-today {

								a.ui-state-default {
									background-color: $overcast;
									color: $black;

									&.ui-state-active {
										background-color: $nightrider;
										color: $white;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}