Ember power select for postcss

_power-select.pcss

:root {
	/* Backgrounds --ember-power-select-background-color: #ffffff; */
	--ember-power-select-disabled-background-color: #eeeeee;
	--ember-power-select-multiple-selection-background-color: #e4e4e4;
	--ember-power-select-highlighted-background: #5897fb;
	--ember-power-select-selected-background: #dddddd;

	--ember-power-select-text-color: inherit;
	/* Texts --ember-power-select-text-color: inherit; */
	--ember-power-select-placeholder-color: #999999;
	--ember-power-select-highlighted-color: #ffffff;
	--ember-power-select-disabled-option-color: #999999;
	--ember-power-select-multiple-selection-color: #333333;
	--ember-power-select-border-color: #cccccc;

	/* Borders --ember-power-select-border-color: #aaaaaa; */
	--ember-power-select-focus-border-color: var(--ember-power-select-border-color);
	--ember-power-select-default-border: 1px solid var(--ember-power-select-border-color);
	--ember-power-select-default-focus-border: 1px solid var(--ember-power-select-focus-border-color);

	--ember-power-select-default-border-radius: 0.2em;
	--ember-power-select-search-input-border-radius: inherit;
	--ember-power-select-trigger-default-border-radius: inherit;
	--ember-power-select-focus-box-shadow: none;

	--ember-power-select-background-color: inherit;
	--ember-power-select-trigger-border: var(--ember-power-select-default-border);
	--ember-power-select-trigger-border-top: var(--ember-power-select-trigger-border);
	--ember-power-select-trigger-border-bottom: var(--ember-power-select-trigger-border);
	--ember-power-select-trigger-border-right: var(--ember-power-select-trigger-border);
	--ember-power-select-trigger-border-left: var(--ember-power-select-trigger-border);
	--ember-power-select-active-trigger-border: var(--ember-power-select-default-focus-border);
	--ember-power-select-active-trigger-border-top: var(--ember-power-select-active-trigger-border);
	--ember-power-select-active-trigger-border-bottom: var(--ember-power-select-active-trigger-border);
	--ember-power-select-active-trigger-border-right: var(--ember-power-select-active-trigger-border);
	--ember-power-select-active-trigger-border-left: var(--ember-power-select-active-trigger-border);
	--ember-power-select-dropdown-border: var(--ember-power-select-default-focus-border);
	--ember-power-select-search-field-border: var(--ember-power-select-default-border);
	--ember-power-select-search-field-focus-border: var(--ember-power-select-default-focus-border);

	--ember-power-select-dropdown-top-border: var(--ember-power-select-dropdown-border);
	--ember-power-select-dropdown-right-border: var(--ember-power-select-dropdown-border);
	--ember-power-select-dropdown-bottom-border: var(--ember-power-select-dropdown-border);
	--ember-power-select-dropdown-left-border: var(--ember-power-select-dropdown-border);

	--ember-power-select-dropdown-box-shadow: none;
	--ember-power-select-dropdown-contiguous-border: none;

	--ember-power-select-multiple-option-border-color: gray;
	--ember-power-select-multiple-option-border: 1px solid var(--ember-power-select-multiple-option-border-color);

	/* Borders radius --ember-power-select-default-border-radius: 4px; */
	/* General border radius --ember-power-select-trigger-default-border-radius: var(--ember-power-select-default-border-radius); */
	--ember-power-select-dropdown-default-border-radius: var(--ember-power-select-default-border-radius);

	--ember-power-select-opened-border-radius: 0;
	/* Border radius of the side of the dropdown and the trigger where they touch --ember-power-select-search-input-border-radius: 0; */
	--ember-power-select-multiple-option-border-radius: var(--ember-power-select-default-border-radius);

	/* Other --ember-power-select-focus-box-shadow: none; */
	--ember-power-select-dropdown-margin: 0;
	/* Margin between the dropdown and the trigger --ember-power-select-dropdown-box-shadow: none; */
	--ember-power-select-line-height: 1.75;
	--ember-power-select-trigger-icon-color: var(--ember-power-select-border-color);
	--ember-power-select-clear-btn-margin: 25px;
	--ember-power-select-option-padding: 8px;
	--ember-power-select-number-of-visible-options: 7;
	--ember-power-select-focus-outline: null;
	--ember-power-select-trigger-ltr-padding: 1em;
	--ember-power-select-trigger-rtl-padding: 0 0 0 16px;
	--ember-power-select-multiple-option-padding: 0 4px;
	--ember-power-select-multiple-option-line-height: 1.45;
	--ember-basic-dropdown-content-background-color: var(--ember-power-select-background-color);
}

.ember-basic-dropdown-content {
	position: absolute;
	width: auto;
	z-index: 1000;
	background-color: var(--ember-basic-dropdown-content-background-color);
}

/* Trigger */
.ember-power-select-trigger {
	position: relative;
	box-sizing: border-box;
	border-top: var(--ember-power-select-trigger-border-top);
	border-bottom: var(--ember-power-select-trigger-border-bottom);
	border-right: var(--ember-power-select-trigger-border-right);
	border-left: var(--ember-power-select-trigger-border-left);
	border-radius: var(--ember-power-select-trigger-default-border-radius);
	background-color: var(--ember-power-select-background-color);
	line-height: var(--ember-power-select-line-height);
	overflow-x: hidden;
	text-overflow: ellipsis;
	min-height: var(--ember-power-select-line-height);
	user-select: none;
	color: var(--ember-power-select-text-color);
	/* Minimum clearfix for modern browsers */

	&:after {
		content: "";
		display: table;
		clear: both;
	}
}
.ember-power-select-trigger:focus,
.ember-power-select-trigger--active {
	border-top: var(--ember-power-select-active-trigger-border-top);
	border-bottom: var(--ember-power-select-active-trigger-border-bottom);
	border-right: var(--ember-power-select-active-trigger-border-right);
	border-left: var(--ember-power-select-active-trigger-border-left);
	box-shadow: var(--ember-power-select-focus-box-shadow);
}
.ember-basic-dropdown-trigger--below.ember-power-select-trigger[aria-expanded="true"],
.ember-basic-dropdown-trigger--in-place.ember-power-select-trigger[aria-expanded="true"] {
	border-bottom-left-radius: var(--ember-power-select-opened-border-radius);
	border-bottom-right-radius: var(--ember-power-select-opened-border-radius);
}
.ember-basic-dropdown-trigger--above.ember-power-select-trigger[aria-expanded="true"] {
	border-top-left-radius: var(--ember-power-select-opened-border-radius);
	border-top-right-radius: var(--ember-power-select-opened-border-radius);
}
.ember-power-select-placeholder {
	color: var(--ember-power-select-placeholder-color);
	display: block;
	overflow-x: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.ember-power-select-status-icon {
	position: absolute;
	display: inline-block;
	width: 0;
	height: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	/* Vertical center trick! border-style: solid; */
	border-width: 7px 4px 0 4px;
	border-color: var(--ember-power-select-trigger-icon-color) transparent transparent transparent;

	.ember-basic-dropdown-trigger[aria-expanded="true"] & {
		transform: rotate(180deg);
	}
}
.ember-power-select-clear-btn {
	position: absolute;
	cursor: pointer;
}

/* Multiple select */
.ember-power-select-trigger-multiple-input {
	font-family: inherit;
	font-size: inherit;
	border: none;
	display: inline-block;
	line-height: inherit;
	-webkit-appearance: none;
	outline: none;
	padding: 0;
	float: left;
	background-color: transparent;
	text-indent: 2px;

	&:disabled {
		background-color: var(--ember-power-select-disabled-background-color);
	}

	/* There's a browser bug where this selectos cannot be chained with commas */

	&::placeholder {
		opacity: 1;
		color: var(--ember-power-select-placeholder-color);
	}

	&::-webkit-input-placeholder {
		opacity: 1;
		color: var(--ember-power-select-placeholder-color);
	}

	&::-moz-placeholder {
		opacity: 1;
		color: var(--ember-power-select-placeholder-color);
	}

	&::-ms-input-placeholder {
		opacity: 1;
		color: var(--ember-power-select-placeholder-color);
	}
}

.ember-power-select-multiple-options {
	padding: 0;
	margin: 0;
}
.ember-power-select-multiple-option {
	border: var(--ember-power-select-multiple-option-border);
	border-radius: var(--ember-power-select-multiple-option-border-radius);
	color: var(--ember-power-select-multiple-selection-color);
	background-color: var(--ember-power-select-multiple-selection-background-color);
	padding: var(--ember-power-select-multiple-option-padding);
	box-sizing: border-box;
	display: inline-block;
	line-height: var(--ember-power-select-multiple-option-line-height);
	float: left;
	margin: 2px 0 2px 3px;
}
.ember-power-select-multiple-remove-btn {
	cursor: pointer;

	&:not(:hover) {
		opacity: 0.5;
	}
}
/* Search bar */
.ember-power-select-search {
	padding: 4px;
	box-sizing: border-box;
}
.ember-power-select-search-input {
	border: var(--ember-power-select-search-field-border);
	border-radius: var(--ember-power-select-search-input-border-radius);
	width: 100%;
	font-size: inherit;
	line-height: inherit;
	padding: 0 5px;
	box-sizing: border-box;

	&:focus {
		border: var(--ember-power-select-search-field-focus-border);
		box-shadow: var(--ember-power-select-focus-box-shadow);
	}
}

/* Dropdown */
.ember-power-select-dropdown {
	border-left: var(--ember-power-select-dropdown-left-border);
	border-right: var(--ember-power-select-dropdown-right-border);
	line-height: var(--ember-power-select-line-height);
	border-radius: var(--ember-power-select-dropdown-default-border-radius);
	box-shadow: var(--ember-power-select-dropdown-box-shadow);
	overflow: hidden;
	color: var(--ember-power-select-text-color);
}
.ember-power-select-dropdown.ember-basic-dropdown-content--above {
	border-top: var(--ember-power-select-dropdown-top-border);
	border-bottom: var(--ember-power-select-dropdown-contiguous-border);
	border-bottom-left-radius: var(--ember-power-select-opened-border-radius);
	border-bottom-right-radius: var(--ember-power-select-opened-border-radius);
}
.ember-power-select-dropdown.ember-basic-dropdown-content--below, .ember-power-select-dropdown.ember-basic-dropdown-content--in-place {
	border-top: var(--ember-power-select-dropdown-contiguous-border);
	border-bottom: var(--ember-power-select-dropdown-bottom-border);
	border-top-left-radius: var(--ember-power-select-opened-border-radius);
	border-top-right-radius: var(--ember-power-select-opened-border-radius);
}
.ember-power-select-dropdown.ember-basic-dropdown-content--in-place {
	/* Dropdown when rendered in place width: 100%; */
}
/* Options */
.ember-power-select-options {
	list-style: none;
	margin: 0;
	padding: 0;
	user-select: none;
	-webkit-user-select: none;

	&[role="listbox"] {
		overflow-y: auto; /* in firefox in windows this can cause a word-break issue. Try `overflow-y: scroll` if that happens */
		-webkit-overflow-scrolling: touch;
	}
}

.ember-power-select-option {
	cursor: pointer;
	padding: 0 var(--ember-power-select-option-padding);
}
.ember-power-select-group[aria-disabled="true"] {
	color: var(--ember-power-select-disabled-option-color);
	cursor: not-allowed;
}
.ember-power-select-group[aria-disabled="true"] .ember-power-select-option,
.ember-power-select-option[aria-disabled="true"] {
	color: var(--ember-power-select-disabled-option-color);
	pointer-events: none;
	cursor: not-allowed;
}
.ember-power-select-option[aria-selected="true"] {
	background-color: var(--ember-power-select-selected-background);
}
.ember-power-select-option[aria-current="true"] {
	background-color: var(--ember-power-select-highlighted-background);
	color: var(--ember-power-select-highlighted-color);
}

/* Groups */
.ember-power-select-group-name {
	cursor: default;
	font-weight: bold;
}

/* Disabled styles */
.ember-power-select-trigger[aria-disabled=true] {
	background-color: var(--ember-power-select-disabled-background-color);
}

/* LTR styles */
.ember-power-select-trigger {
	padding: var(--ember-power-select-trigger-ltr-padding);
}
.ember-power-select-selected-item, .ember-power-select-placeholder {
	margin-left: 8px;
}
.ember-power-select-status-icon {
	right: 5px;
}
.ember-power-select-clear-btn {
	right: var(--ember-power-select-clear-btn-margin);
}

.ember-power-select-group {
	.ember-power-select-group {
		.ember-power-select-group-name {
			padding-left: calc(3 * var(--ember-power-select-option-padding));
		}

		.ember-power-select-option {
			padding-left: calc(5 * var(--ember-power-select-option-padding));
		}
	}

	.ember-power-select-option {
		padding-left: calc(3 * var(--ember-power-select-option-padding));
	}

	.ember-power-select-group-name {
		padding-left: var(--ember-power-select-option-padding);
	}
}

/* RTL styles */
.ember-power-select-trigger[dir=rtl] {
	padding: var(--ember-power-select-trigger-rtl-padding);

	.ember-power-select-selected-item, .ember-power-select-placeholder {
		margin-right: 8px;
	}

	.ember-power-select-multiple-option {
		float: right;
	}

	.ember-power-select-trigger-multiple-input {
		float: right;
	}

	.ember-power-select-status-icon {
		left: 5px;
		right: initial;
	}

	.ember-power-select-clear-btn {
		left: var(--ember-power-select-clear-btn-margin);
		right: initial;
	}
}


.ember-power-select-dropdown[dir=rtl] {
	.ember-power-select-group {
		.ember-power-select-group {
			.ember-power-select-group-name {
				padding-right: calc(3 * var(--ember-power-select-option-padding));
			}

			.ember-power-select-option {
				padding-right: calc(5 * var(--ember-power-select-option-padding));
			}
		}

		.ember-power-select-option {
			padding-right: calc(3 * var(--ember-power-select-option-padding));
		}

		.ember-power-select-group-name {
			padding-right: calc(var(--ember-power-select-option-padding));
		}
	}
}