.datenel-component {
	user-select: none;
	color: var(--datenel-main-color);

	button {
		border: none;
		background: none;
		cursor: pointer;
		color: var(--datenel-main-color);
		&:hover {
			background: var(--datenel-hover-color);
		}
	}

	button.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		border: 0;
	}

	.header {
		padding: 0.75rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid var(--datenel-border-color);

		button {
			img {
				width: 1rem;
				height: 1rem;
			}

			&.stepper{
				width: 1.75rem;
				height: 1.75rem;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50%;
			}

			&.indicator {
				padding: 0.25rem 0.5rem;
				border-radius: 0.25rem;
			}
		}

		input.indicator {
			border:none;
			background: none;
			text-align: center;
			outline: none;
			border-radius: 0.25rem;
			padding: 0.25rem 0;
			color: var(--datenel-main-color);
			&:hover {
				background: var(--datenel-hover-color);
			}
		}
	}

	.calendar-view-body {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		padding: 0.75rem;
		gap: 0.125rem;
		.item {
			width: 2rem;
			height: 2rem;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 0.75rem;
		}
		.item.day-indicator {
			opacity: 0.5;
		}

		button.item.date {
			border-radius: 50%;
			position: relative;
			&.extra-month {
				opacity: 0.3;
				cursor: default;
			}
			&:hover {
				background: var(--datenel-hover-color);
			}
			.today-indicator {
				position: absolute;
				bottom: 0.25rem;
				width: 0.25rem;
				height: 0.25rem;
			}

			&.active {
				background: var(--datenel-accent-color);
				color: var(--datenel-reversed-color);
			}
		}
	}

	.month-selector-body {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		padding: 0.75rem;
		gap: 0.125rem;
		.item {
			border-radius: 0.25rem;
			height: 2rem;
		}
	}
}