/* Patterns - Interaction - DatePicker */
/* Since this pattern is Deprecated, it should not appear at SASSDCS! */

.pika {
	&-single {
		background: var(--color-neutral-0);
		border: var(--border-size-s) solid var(--color-neutral-4);
		border-radius: var(--border-radius-soft);
		display: block;
		margin-top: var(--space-xs);
		max-width: 320px;
		position: relative;

		.layout-native & {
			max-width: 100%;
		}

		&.is-bound {
			box-shadow: var(--shadow-s);
			position: absolute !important;
			z-index: var(--layer-global-elevated);
		}

		&.is-hidden {
			display: none;
		}
	}

	&-title {
		align-items: center;
		display: flex;
		justify-content: space-between;
		padding: var(--space-m) var(--space-base);

		select {
			cursor: pointer;
			left: 0;
			margin: 0;
			opacity: 0;
			position: absolute;
			right: 0;
		}

		.pika-time-container {
			select {
				opacity: 1;
				position: static;
			}
		}
	}

	&-labels {
		display: flex;
		flex: 1;
	}

	&-select-month {
		margin-left: var(--space-base);
		margin-right: 0;

		.year-first & {
			margin-left: var(--space-base);
			margin-right: 0;
		}
	}

	&-prev {
		background-color: transparent;
		border: var(--border-size-none);
		color: var(--color-neutral-7);
		cursor: pointer;
		font: normal normal normal 0 FontAwesome;
		padding: var(--space-none) var(--space-s);

		&:before {
			content: '\f104';
			font-size: var(--font-size-h5);
			position: relative;
		}
	}

	&-next {
		background-color: transparent;
		border: var(--border-size-none);
		color: var(--color-neutral-7);
		cursor: pointer;
		font: normal normal normal 0 FontAwesome;
		margin-left: var(--space-base);
		padding: var(--space-none) var(--space-s);

		&:before {
			content: '\f105';
			font-size: var(--font-size-h5);
			position: relative;
		}
	}

	&-label {
		color: var(--color-primary);
		cursor: pointer;
		position: relative;

		&:first-child {
			margin-right: var(--space-base);
		}

		&:hover {
			color: var(--color-primary-hover);
			text-decoration: underline;
		}
	}

	&-table {
		display: flex;
		flex-direction: column;
		padding: var(--space-none) var(--space-base) var(--space-base);
		width: 100%;

		thead {
			display: flex;
			flex-direction: row;

			tr {
				display: flex;
				flex: 1;
			}
		}

		th {
			color: var(--color-neutral-7);
			flex: 1;
			font-weight: var(--font-regular);

			abbr[title] {
				text-decoration: none;
			}
		}

		tbody {
			margin-top: var(--space-s);
			overflow: hidden;

			tr {
				display: flex;
				flex-direction: row;
				margin-bottom: var(--space-xs);

				&:last-child {
					margin-bottom: var(--space-none);
				}
			}

			td {
				align-items: center;
				display: inline-flex;
				flex: 1;
				justify-content: center;
			}
		}
	}

	&-button {
		background-color: transparent;
		border: var(--border-size-none);
		border-radius: var(--border-radius-soft);
		color: var(--color-neutral-9);
		cursor: pointer;
		height: 32px;
		padding: var(--space-none);
		position: relative;
		width: 32px;
		z-index: var(--layer-local-tier-1);

		&:hover {
			background-color: var(--color-neutral-3);
		}

		.is-today & {
			background-color: var(--color-neutral-4);
		}

		.is-inrange & {
			background: var(--color-primary) var(--color-primary-lightest);
		}

		.is-startrange &,
		.is-selected &,
		.is-endrange & {
			background: var(--color-primary);
			color: var(--color-neutral-0);
		}

		.is-disabled &,
		.is-disabled.is-outside-current-month & {
			color: var(--color-neutral-7);
			pointer-events: none;
			text-decoration: line-through;
		}

		.is-outside-current-month & {
			color: var(--color-neutral-7);
			text-decoration: none;
		}

		.has-event &:before {
			background-color: var(--color-primary);
			border-radius: var(--border-radius-circle);
			bottom: 3px;
			content: '';
			height: 4px;
			left: 50%;
			margin-left: -2px;
			position: absolute;
			width: 4px;
		}

		.is-selected.has-event &:before {
			background-color: var(--color-neutral-0);
		}
	}

	&-today-container {
		height: auto;
		margin: var(--space-none) var(--space-none);
		padding: var(--space-none) var(--space-none) var(--space-none);
		width: 100%;

		&:hover {
			background-color: transparent;
		}
	}

	&-go-today {
		background-color: transparent;
		border: var(--border-size-none);
		color: var(--color-primary);
		cursor: pointer;
		font-weight: normal;
		padding: var(--space-none);

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

	&-month,
	&-year {
		align-items: center;
		display: flex;
		justify-content: center;
		margin-bottom: var(--space-base);
		width: 33.333%;

		&.is-selected {
			background-color: var(--color-primary);
			color: var(--color-neutral-0);
		}
	}

	&-time-container {
		margin: 0 var(--space-base);

		select {
			background-color: transparent;
			border: 0;
			color: var(--color-primary);
		}

		option {
			color: var(--color-neutral-10);
		}
	}
}

input.OSFillParent.calendar-input {
	display: none;
}

.is-inrange {
	position: relative;

	&:before {
		background: var(--color-primary) var(--color-primary-lightest);
		border-radius: var(--border-radius-soft);
		content: '';
		height: 100%;
		left: -8px;
		position: absolute;
		right: -14px;
		top: 0;
	}

	&:first-child {
		&:before {
			left: 3px;
		}
	}

	&:last-child {
		&:before {
			right: 3px;
		}
	}
}

.month-picker,
.year-picker {
	-webkit-box-direction: normal;
	-webkit-box-orient: horizontal;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	padding: var(--space-none);
}

.prev-year,
.next-year {
	color: var(--color-neutral-7);
}

/* Keycode shortcuts dialog */
.calendar-help {
	&-dialog {
		background-color: var(--color-neutral-0);
		bottom: 0;
		color: var(--color-neutral-10);
		display: none;
		left: 0;
		padding: var(--space-s);
		position: absolute;
		right: 0;
		top: 0;
		z-index: var(--laber-global-elevated);

		&.is--open {
			display: block;
		}
	}

	&-content {
		display: flex;
		flex-direction: column;
		height: 100%;
		justify-content: space-between;
		overflow-y: auto;

		p {
			margin: 0;
		}

		ul {
			padding-left: var(--space-m);
		}
	}

	&-trigger {
		background-color: var(--color-info);
		clip: rect(0, 0, 0, 0);
		color: var(--color-neutral-0);
		height: 0;
		left: 50%;
		overflow: hidden;
		padding: var(--space-s);
		position: absolute;
		top: var(--space-xxl);
		transform: translateX(-50%);
		white-space: nowrap;
		width: 0;

		&:focus {
			clip: initial;
			height: auto;
			overflow: visible;
			width: auto;
			z-index: var(--laber-global-elevated);
		}
	}

	&-close {
		background-color: var(--color-neutral-0);
		color: var(--color-neutral-10);
		height: auto;
	}
}

.portal-class ~ .pika-single.is-bound {
	/* Fix datepicker when inside Popup Widget */
	z-index: calc(var(--layer-above) + var(--popup-layer));
}

// Responsive --------------------------------------------------------------------
.phone {
	.pika {
		&-lendar {
			tr {
				border-bottom: 0;
			}
		}

		&-time {
			td {
				display: initial;
			}
		}
	}
}

// IsRTL -------------------------------------------------------------------------
.is-rtl {
	.pika {
		&-next {
			margin-left: 0;
			margin-right: var(--space-m);
			padding: var(--space-none) var(--space-xs);

			&:before {
				content: '\f104';
			}
		}

		&-prev {
			&:before {
				content: '\f105';
			}
		}

		&-label {
			&:first-child {
				margin-left: var(--space-base);
				margin-right: 0;
			}
		}
	}
}

// Accessibility ---------------------------------------------------------------------
.has-accessible-features {
	.desktop & {
		.pika {
			&-title {
				select {
					border: none;
					color: var(--color-primary);
					opacity: 1;

					&:hover {
						border-bottom: var(--border-size-s) solid var(--color-primary);
					}

					option {
						color: var(--color-neutral-10);
					}
				}

				.pika-label {
					align-items: center;
					display: flex;
				}
			}
		}
	}
}