@use '@talend/bootstrap-theme/src/theme/guidelines' as *;
@use '@talend/design-tokens/lib/tokens' as tokens;

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

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

.calendar-header {
	&::after {
		@include picker-underline;
		width: 100%;
		position: absolute;
		left: 0;
		top: 1.4375rem;
	}

	th {
		text-align: center;
		padding-bottom: $padding-small;
	}

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

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

	.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;
			color: tokens.$coral-color-accent-text-strong;
			border: solid 1px tokens.$coral-color-accent-border;
		}

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