opal-components/src/components/opal-tabs/opal-tab-list/opal-tab/index.css

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

@component OpalTab {
	display: inline-block;

	@el control {
		position: relative;
		display: block;
		padding: 5px 22px;
		border: 0;
		border-radius: 0;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
		background: #fff;
		color: #000;
		text-align: center;
		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;

			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%);
		}
	}
		@el content-slot {
			position: relative;
			display: block;
		}

	@mod selected {
		@el control {
			box-shadow: 0 3px hsl(208,94%,54%);
		}
	}

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

		@el control {
			cursor: default;
		}
	}
}