/* ----~~~~ Vars ~~~~---- */

.kselect {
    --background: #262626;
    --kft-hover-color:lightgreen;
	--error-border:#a5393b;
}

.ks.popover {
	--pop-background: #262626;
    --scroll-background: rgba(79, 126, 230, .7);
    --kpop-border-color: var(--border-focus);
    --item-color: var(--white);
    --item-hover: #262626;
    --item-hover-background: #3e3e3e;
    --item-selected-color: var(--white);
    --item-selected-background: rgba(74, 116, 220, .6);
    --item-selected-hover-background: rgba(74, 116, 220, .8);
    --item-header-background:rgba(255,255,255,.1);
    --item-header-color:black;
}

.light .kselect {
    --background: white;
    --kft-hover-color: var(--border-focus);
	--error-border:#a5393b;
}

.light .ks.popover {
	--pop-background: white;
    --scroll-background: rgba(157, 208, 179, .4);
    --kpop-border-color: var(--border-focus);
    --item-color: #333;
    --item-hover: #333;
    --item-hover-background: rgba(157, 208, 179, .2);
    --item-selected-color: #333;
    --item-selected-background: rgba(157, 208, 179, .6);
    --item-selected-hover-background: rgba(157, 208, 179, .8);
    --item-header-background:rgba(0,0,0,.2);
    --item-header-color:black;
}

/* ----~~~~ kSelect ~~~~---- */

.kselect {
    position: relative;
    width: 100%;
    min-width: 0;
    border-radius: 5px;
    box-sizing: border-box;
    background-color: var(--background);
    border: 2px solid var(--input-border);
    transition: border-color .2s ease-in-out;
    user-select: none;
    outline: none;
    overflow: visible;

    &.open i.arrow { transform: rotate(180deg); }

	&:hover,
	&:has(.selected-item:focus),
	&.open { border-color: var(--border-focus); }

	&.default {
	    & .selected-item { color: var(--input-placeholder); }
	    & .selected-item :not(span):before { color: var(--input-placeholder); } 
	}

	& .ksearch-inline {
		height:calc(100% - 2px);
		border:0;
		padding: 0;
		width: max-content;
		flex:1;
		font-size: var(--input-size);
		font-family: Roboto;
	}
}

.field.error .kselect { border-color:var(--error-border); }

/* ----~~~~ kSelect Popover ~~~~---- */

.ks.popover {
	background: var(--pop-background);
	border-color: var(--kpop-border-color);
	color: white;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 32px 0px;
	border-radius: 5px;
	border-width: 2px;
	inset:auto;
	position-try-fallbacks: flip-block;
	position:absolute;
	overflow-y: auto;
	max-height: 150px;
	scrollbar-color: var(--scroll-background) transparent;
	margin-top: 5px;
	opacity: 0;
	transform: translateY(-4px);
	transition:
		opacity .25s ease,
		transform .25s ease,
		overlay .25s ease allow-discrete,
		display .25s ease allow-discrete;

	&:popover-open {
		opacity: 1;
		transform: translateY(0);
	}
}

@starting-style {
	.ks.popover:popover-open {
		opacity: 0;
		transform: translateY(-4px);
	}
}

.ks.popover.closing:popover-open {
	opacity: 0;
	transform: translateY(-4px);
}



/* ----~~~~ Selected Item ~~~~---- */

.kselect .selected-item {
    cursor: pointer;
    color: var(--input-color);
    opacity: .87;
    padding: 0 0 0 12px;
    height: 36px;
    line-height: 36px;
    font-size: var(--input-size);
    display: flex;
    align-items: center;
    box-sizing: border-box;
    outline: none;

    & span { 
        flex: 1; min-width: 0; 
        overflow: hidden;
        text-overflow: ellipsis;
        text-wrap: nowrap;
    }
    & i.arrow {
        width:30px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.25s ease;
        margin-right:5px;
        &:before { content: "\f0d7"; color:var(--input-placeholder); }
    }
    & .kft.x { 
        height:100%; 
        width:30px; 
        background-size: 0 !important;
        &:before { color:var(--input-placeholder); transition: color .2s ease-in-out; }
        &:hover:before { color:var(--kft-hover-color); }
    }
}


/* ----~~~~ Items ~~~~---- */

.ks.items {
	padding: 4px 0;
	overflow-y: auto;
	max-height: 400px;
	scrollbar-color: var(--scroll-background) transparent;

	.header {
		background: var(--item-header-background);
		color:var(--item-header-color);
		height: 35px;
		display: flex;
		align-items: center;
		padding-left: 10px;
		font-size: 17px;
		cursor: default;
	}

	.item {
		font-size: var(--input-size);
		padding: 0 0 0 32px;
		height: 40px;
		line-height: 40px;
		border-radius: 5px;
		margin: 0 5px;
		cursor: pointer;
		color: var(--item-color);
		overflow: hidden;
		text-overflow: ellipsis;
		text-wrap: nowrap;
		&:hover { background-color: var(--item-hover-background); }
		&.active {
			color: var(--item-selected-color);
			background-color: var(--item-selected-background);
			position: relative;
			&:hover { background-color: var(--item-selected-hover-background); }
			&:before {
				font-family: "kui";
				content: "\e90b";
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: 10px;
				color: var(--item-selected-color);
				font-size: 14px;
			}
		}
	}

	.no-results {
	    padding: 0 0 0 32px;
	    height: 40px;
	    line-height: 40px;
	    margin: 0 5px;
	    text-transform: uppercase;
	    color:var(--input-placeholder);
	}
 }