@use '@talend/design-tokens/lib/tokens' as tokens;

@import '../../shared/styles/mixins';

.container {
	width: 100%;
	position: relative;
}

.calendar-header {
	th {
		text-align: center;
	}

	abbr {
		border: none;
		font-weight: normal;
		text-decoration: none;
	}
}

.calendar-row {
	height: 2.25rem;
	text-align: center;

	.date-range {
		position: relative;

		&.range-end::after,
		&.range-start::before,
		&.range-start::after,
		&.range-middle::after,
		&.range-end::before,
		&.range-middle::before {
			content: ' ';
			position: absolute;
			height: 1.5625rem;
			z-index: -1;
			background-color: tokens.$coral-color-accent-background-weak;
		}

		&.range-end::after {
			width: 1.5rem;
			left: 0.4063rem;
			border-top-right-radius: 50%;
			border-bottom-right-radius: 50%;
		}

		&.range-start::before {
			width: 1.5rem;
			right: 0.4063rem;
			border-top-left-radius: 50%;
			border-bottom-left-radius: 50%;
		}

		&.range-start,
		&.range-middle {
			&::after {
				width: 50%;
				right: 0;
			}
		}

		&.range-end,
		&.range-middle {
			&::before {
				width: 50%;
				left: 0;
			}
		}
	}

	.calendar-day {
		@include picker-action;

		height: 1.5rem;
		width: 1.5rem;
		background: transparent;
		border: none;
		border-radius: 50%;
		line-height: 1.5rem;
		padding: 0;

		&.today {
			background-color: tokens.$coral-color-accent-background-weak;
			color: tokens.$coral-color-accent-text;
			border: solid 1px tokens.$coral-color-accent-border;
		}

		&.not-current-month {
			opacity: 0.54;
		}

		&.range:hover {
			background-color: tokens.$coral-color-accent-background-weak;
		}

		&:disabled {
			cursor: not-allowed;
		}
	}
}