.datenel-component {
	--main-color: #000000;
	--accent-color: #000000;
	--reversed-color: #ffffff;
	--hover-color: #00000017;

	user-select: none;
	color: var(--main-color);

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

	.header {
		padding: 0.75rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #e0e0e0;

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

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

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

	.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;
			}
			&:hover {
				background: var(--hover-color);
			}
			.today-indicator {
				position: absolute;
				bottom: 0.25rem;
				width: 0.25rem;
				height: 0.25rem;
			}

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