.calendar-alpine {
	display: flex;
	flex-flow: column;
	gap: 12px;
	width: 100%;
	padding: 20px 24px;
}

.calendar-alpine__header {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 8px;
}

.calendar-alpine__month {
	flex: 1;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;

	&::first-letter {
		text-transform: uppercase;
	}
}

.calendar-alpine__nav-btn {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;

	svg {
		width: 24px;
		height: 24px;
		color: #a4a7ae;
	}
}

.calendar-alpine__weekdays,
.calendar-alpine__days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	text-align: center;
	justify-content: space-between;
}

.calendar-alpine__weekdays div {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-align: center;
}

.calendar-alpine__days div {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	font-size: 14px;
	line-height: 20px;
	color: #717680;
	text-align: center;

	&.today {
		position: relative;

		&::before {
			content: '';
			position: absolute;
			bottom: 4px;
			width: 5px;
			height: 5px;
			border-radius: 50%;
			background-color: #bd7bf6;
		}
	}

	&.selected {
		color: $color-white;
		border-radius: 50%;
		background-color: $color-accent;

		&.today::before {
			background-color: $color-white;
		}
	}
}

.selected {
	background: #3b82f6;
	color: #fff;
}

.empty {
	cursor: default;
}