/*
 * @file wuiplugin-selector-0.4.css
 * @version 0.4
 * @author Sergio E. Belmar V. (wuijs.project@gmail.com)
 * @copyright Sergio E. Belmar V. (wuijs.project@gmail.com)
 */

div.wui-modal.wuiplugin-selector > .box {
	width: var(--wuiplugin-selector-box-width);
	height: auto;
	min-height: 96px;
	overflow: hidden;
	background-color: var(--wuiplugin-selector-box-bgcolor);
}

div.wui-modal.wuiplugin-selector > .box > .options,
div.wui-modal.wuiplugin-selector > .box > .options > .option {
	display: flex;
	position: relative;
	flex-grow: 1;
	flex-shrink: 0;
}

div.wui-modal.wuiplugin-selector > .box > .options {
	max-height: calc(calc(10 * 44px) - 1px);
	overflow: auto;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
}

div.wui-modal.wuiplugin-selector > .box > .options > .option {
	width: 100%;
	height: 44px;
	border-bottom: 1px solid var(--wuiplugin-selector-option-bordercolor-out);
	background-color: var(--wuiplugin-selector-option-bgcolor-out);
	padding: 0 10px;
	align-items: center;
	gap: 10px;
}

div.wui-modal.wuiplugin-selector > .box > .options > .option > .icon {
	visibility: hidden;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

div.wui-modal.wuiplugin-selector > .box > .options > .option > .icon:not([class$="color"]) {
	background-color: var(--wuiplugin-selector-option-iconcolor-out);
}

div.wui-modal.wuiplugin-selector > .box > .options > .option > .icon.visible,
div.wui-modal.wuiplugin-selector > .box > .options > .option.selected > .icon {
	visibility: visible;
}

div.wui-modal.wuiplugin-selector > .box > .options > .option > .text {
	cursor: default;
	overflow: hidden;
	flex-grow: 1;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--wuiplugin-selector-option-textcolor-out);
}

div.wui-modal.wuiplugin-selector > .box > .options > .option.selected > .text.selecteable {
	color: var(--wuiplugin-selector-option-textcolor-selected) !important;
}

div.wui-modal.wuiplugin-selector > .box > .options > .option > .text > .empty {
	-khtml-opacity: .7;
	-moz-opacity: .7;
	opacity: .7;
}

div.wui-modal.wuiplugin-selector > .box > .options > .option:not(.disabled):is(:hover, :focus, :focus-within) {
	border-color: var(--wuiplugin-selector-option-bordercolor-over);
	background-color: var(--wuiplugin-selector-option-bgcolor-over);
}

div.wui-modal.wuiplugin-selector > .box > .options > .option:not(.disabled):is(:hover, :focus, :focus-within) > .icon {
	background-color: var(--wuiplugin-selector-option-iconcolor-over);
}

div.wui-modal.wuiplugin-selector > .box > .options > .option:not(.disabled):is(:hover, :focus, :focus-within) > .text {
	color: var(--wuiplugin-selector-option-textcolor-over);
}

div.wui-modal.wuiplugin-selector > .box > .options > .option.disabled > .icon {
	background-color: var(--wuiplugin-selector-option-iconcolor-disabled);
}

div.wui-modal.wuiplugin-selector > .box > .options > .option.disabled > .text {
	color: var(--wuiplugin-selector-option-textcolor-disabled);
}

div.wui-modal.wuiplugin-selector > .box > .footer {
	height: 70px;
}

div.wui-modal.wuiplugin-selector > .box > .footer > button {
	min-width: 120px;
	margin-top: 15px;
	margin-left: 10px;
	margin-right: 10px;
	font-size: 15px;
}

@media screen and (max-width: 767px) {
	div.wui-modal.wuiplugin-selector > .box > .options {
		scrollbar-color: var(--wui-modal-body-scroll-bgcolor-out) transparent;
	}

	div.wui-modal.wuiplugin-selector > .box > .options::-webkit-scrollbar {
		width: 4px;
		background-color: transparent;
	}

	div.wui-modal.wuiplugin-selector > .box > .options::-webkit-scrollbar-thumb {
		border-radius: 2px;
		background-color: var(--wui-modal-body-scroll-bgcolor-out);
	}

	div.wui-modal.wuiplugin-selector > .box > .options::-webkit-scrollbar-thumb:is(:hover, :active) {
		background-color: var(--wui-modal-body-scroll-bgcolor-over);
	}

	div.wui-modal.wuiplugin-selector > .box > .options::-webkit-scrollbar-track {
		background-color: transparent;
	}

	div.wui-modal.wuiplugin-selector > .box > .options > .option:last-child {
		border: 0;
	}

	div.wui-modal.wuiplugin-selector > .box > .footer {
		height: 52px;
		border-top: 1px solid var(--wuiplugin-selector-button-bordercolor);
	}

	div.wui-modal.wuiplugin-selector > .box > .footer > button {
		margin-top: 0;
		margin-left: 0;
		margin-right: 0;
		border-top: 0;
		border-bottom: 0;
		font-size: 17px;
	}

	div.wui-modal.wuiplugin-selector > .box > .footer > button:first-child {
		border-right: 1px solid var(--wuiplugin-selector-button-bordercolor);
	}
}