opal-components/src/components/opal-select/opal-select-option/index.css

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

@component OpalSelectOption {
	display: block;

	@el control {
		position: relative;
		display: block;
		box-sizing: border-box;
		padding: 7px 38px 7px 22px;
		width: 100%;
		border: 0;
		border-radius: 0;
		background: #fff;
		color: #000;
		text-align: left;
		text-shadow: none;
		white-space: nowrap;
		font: 16px/24px Verdana, Geneva, sans-serif;
		font-weight: normal;
		cursor: pointer;
		user-select: none;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
		-webkit-tap-highlight-color: transparent;

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

		&:focus {
			outline: none;
		}
			&:focus::after {
				position: absolute;
				top: 2px;
				right: 2px;
				bottom: 2px;
				left: 2px;
				box-shadow: inset 0 0 0 1px hsl(208,100%,60%);
				content: '';
				pointer-events: none;
			}

		&:active {
			background: hsl(0,0%,80%);
		}
	}
		@el content-slot {
			position: relative;
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;

			sub {
				bottom: 0;
				display: block;
				font-size: .9em;
				line-height: 1.5;
				opacity: .5;
			}
		}

		@el icon-check {
			position: absolute;
			top: 0;
			right: 14px;
			bottom: 0;
			display: none;
			margin: auto;
			width: 16px;
			height: 16px;
			stroke-width: 3px;
			stroke: #000;
			stroke-linecap: round;
			stroke-linejoin: round;
			fill: none;
		}

	@mod selected {
		@el control {
			color: hsl(208,90%,50%);
		}
			@el icon-check {
				display: block;
			}
	}

	@mod disabled {
		opacity: .5;
		pointer-events: none;

		@el control {
			cursor: default;
		}
	}
}