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

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

@component OpalSelect {
	position: relative;
	display: inline-block;
	vertical-align: middle;

	@el button {
		display: block;
		min-width: 100%;

		@mod size=s {
			@el button-icon {
				width: 12px;
				height: 12px;
			}
		}

		@mod checked {
			@el button-icon {
				transform: scaleY(-1);
			}
		}
	}
		@el button-icon {
			position: relative;
			top: -1px;
			display: inline-block;
			margin-left: .6em;
			width: 14px;
			height: 14px;
			vertical-align: middle;
			transition: transform .1s linear;
			stroke-width: 3px;
			stroke: currentColor;
			stroke-linecap: round;
			stroke-linejoin: round;
			fill: none;
		}

	@el menu {
	}
		@el menu-content {
		}
			@el new-item-input-slot {
			}
				@el new-item-input {
					display: block;
					margin: 6px 10px 4px;
					width: auto;
				}

	/* Combinations */

	& .OpalPopover {
		padding: 6px 0;
		min-width: 140px;
	}

	& .OpalPopover .OpalPopover__content {
		overflow: auto;
		max-height: 380px;
	}

	& .OpalFilteredList .OpalFilteredList__query-input {
		margin: 4px 10px 6px;
	}

	& .OpalModal__content > .OpalFilteredList .OpalFilteredList__query-input {
		margin: 0 0 10px;
	}

	& .OpalLoadedList {
		height: 304px; /* 38 * 8 */
	}

	& .OpalLoader[align-center] {
		border-top-width: 100px;
		border-bottom-width: 100px;
	}
}