opal-components/src/components/opal-calendar/index.css

[Rionite](https://github.com/Riim/Rionite) component set.

@component OpalCalendar {
	display: block;
	width: 300px;
	border: 1px solid hsl(0,0%,86%);
	border-radius: 3px;
	background: #fff;
	color: #000;
	text-shadow: none;
	font: 16px/24px Verdana, Geneva, sans-serif;
	font-weight: normal;

	@el header {
		position: relative;
		padding: 8px 44px;
		text-align: center;
	}
		@el btn-prev-month,
			btn-next-month
		{
			position: absolute;
			top: 0;
			bottom: 0;
			margin: auto;
			padding: 0;
			width: 30px;
			height: 30px;
			border: 0;
			border-radius: 50%;
			background: none;
			color: hsl(0,0%,50%);
			cursor: pointer;

			&:hover {
				background: hsl(0,0%,90%);
				color: #000;
			}

			&:focus {
				outline: none;

				body:not(._no-focus-highlight) &::after {
					position: absolute;
					top: 2px;
					right: 2px;
					bottom: 2px;
					left: 2px;
					border-radius: inherit;
					box-shadow: inset 0 0 0 1px hsl(208,94%,54%);
					content: '';
					pointer-events: none;
				}
			}

			&:active {
				background: hsl(0,0%,80%);
			}

			@mod disabled {
				background: none;
				color: #000;
				opacity: .3;
				pointer-events: none;
			}
		}

		@el btn-prev-month {
			left: 8px;
		}

		@el btn-next-month {
			right: 8px;
		}
			@el btn-prev-month-icon,
				btn-next-month-icon
			{
				display: block;
				margin: auto;
				width: 18px;
				height: 18px;
				stroke-width: 3px;
				stroke: currentColor;
				stroke-linecap: round;
				stroke-linejoin: round;
				fill: none;
			}

			@el btn-next-month-icon {
				transform: scaleX(-1);
			}

		@el month-select {
		}

		@el year-select {
		}

	@el body {
		padding: 0 8px 8px;
		text-align: center;
		cursor: default;
		user-select: none;
	}
		@el week-days,
			days
		{
			width: 100%;
			border-spacing: 0;
			border-collapse: separate;
		}
			@el week-days-row,
				days-row
			{
			}
				@el week-day,
					day
				{
					display: inline-block;
					box-sizing: border-box;
					padding: 5px 7px;
					width: 14.2857%;
					border: 1px solid transparent;
				}

		@el week-days {
		}
			@el week-days-row {
			}
				@el week-day {
				}

		@el days {
		}
			@el days-row {
			}
				@el day {
					position: relative;
					border-radius: 3px;
					cursor: pointer;

					&:hover {
						background: hsl(0,0%,90%);
					}

					&:focus {
						outline: none;

						body:not(._no-focus-highlight) &::after {
							position: absolute;
							top: 2px;
							right: 2px;
							bottom: 2px;
							left: 2px;
							border-radius: inherit;
							box-shadow: inset 0 0 0 1px hsl(208,94%,54%);
							content: '';
							pointer-events: none;
						}
					}

					&:active {
						background: hsl(0,0%,80%);
					}

					@mod today {
						text-decoration: underline;
					}

					@mod not-in-current-month {
						opacity: .45;
					}

					@mod disabled {
						background: none;
						opacity: .15;
						cursor: default;
					}

					@mod selected {
						color: hsl(208,90%,50%);
						opacity: 1;
					}
				}
}