datenel-react/src/style.scss

.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;
				font-size: 0.75rem;
			}
		}

		input.indicator {
			border: none;
			background: none;
			text-align: center;
			outline: none;
			border-radius: 0.25rem;
			padding: 0.25rem 0;
			color: var(--datenel-main-color);
			width: 4rem;
			font-size: 0.75rem;

			&:hover {
				background: var(--datenel-hover-color);
			}
		}
	}

	.body {
		display: flex;
		.calendar-view-body {
			padding: 0.75rem;
			gap: 0.125rem;

			&.grid {
				display: grid;
				grid-template-columns: repeat(7, 1fr);

				.item.date {
					border-radius: 50%;

					&.extra-month, &.not-available {
						cursor: default;
					}

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

			&.flex {
				display: flex;
				flex-direction: column;

				.listitem {
					padding: 0;
					display: grid;
					grid-template-columns: repeat(7, 1fr);
					border-radius: 1rem;

					.item.date {
						background: none;
					}

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

						.extra-month, .not-available {
							opacity: 0.5;
						}
					}
				}

			}

			.item {
				width: 2rem;
				height: 2rem;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 0.75rem;
				position: relative;

				&.extra-month, &.not-available {
					opacity: 0.3;
					&:hover {
						background: none;
					};
				}

				&.day-indicator {
					opacity: 0.5;
				}

				.today-indicator {
					position: absolute;
					bottom: 0.25rem;
					width: 0.25rem;
					height: 0.25rem;
				}
			}
		}

		.month-selector-body {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			padding: 0.75rem;
			gap: 0.125rem;

			.item {
				border-radius: 0.25rem;
				height: 2rem;
				padding: 0 0.5rem;

				&.not-available {
					opacity: 0.3;
					cursor: default;
					&:hover {
						background: none;
					};
				}
			}
		}

		.week-indicator {
			display: flex;
			flex-direction: column;
			border-right: 1px solid var(--datenel-border-color);
			gap: 0.125rem;
			padding: 0.75rem;

			.item {
				font-size: 0.75rem;
				width: 2rem;
				height: 2rem;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50%;
			}

			.item.title {
				opacity: 0.5;
			}
			.item.active {
				background: var(--datenel-accent-color);
				color: var(--datenel-reversed-color);
			}
		}
	}
}