/* Input
-------------------------------------------- */
.search-box, .xSearchBox {
    display: flex;
}

.xSearchBox {
    position: relative;
    width: var(--searchbox-width);
    border-radius: var(--searchbox-input-border-radius);
}

.xSearchBox > input {
    width: 100% !important;
}

.xSearchBox:focus-within {
    outline: var(--outline);
    outline-offset: var(--outline-outset);
}

.search-box > input,
.xSearchBox > input {
    padding: var(--searchbox-input-padding);
    border-width: var(--searchbox-input-border-width);
    border-style: var(--searchbox-input-border-style);
    border-color: var(--searchbox-input-border-color);
    border-radius: var(--searchbox-input-border-radius);
    font-family: var(--searchbox-input-font-family);
    font-size: var(--searchbox-input-font-size);
    font-style: var(--searchbox-input-font-style);
    font-weight: var(--searchbox-input-letter-spacing);
    letter-spacing: var(--searchbox-input-letter-spacing);
    line-height: var(--searchbox-input-line-height);
    background-color: var(--searchbox-input-background-color);
}

.search-box > input:hover,
.xSearchBox > input:hover {
    border-width: var(--searchbox-input-border-width--hover);
    border-style: var(--searchbox-input-border-style--hover);
    border-color: var(--searchbox-input-border-color--hover);
    background-color: var(--searchbox-input-background-color--hover);
}

.search-box > input:active,
.xSearchBox > input:active {
    border-color: var(--searchbox-input-border-color--active);
    background-color: var(--searchbox-input-background-color--active);
}

.search-box > input:focus,
.xSearchBox > input:focus {
    border-width: var(--searchbox-input-border-width--focus);
    border-style: var(--searchbox-input-border-style--focus);
    border-color: var(--searchbox-input-border-color--focus);
    background-color: var(--searchbox-input-background-color--focus);
    outline: 0;
}


/* Icon
-------------------------------------------- */
.search-box::before,
.xSearchBox::before {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 50%;
    transform: translateY(-50%);
    width: var(--searchbox-icon-width);
    font-family: var(--font-family--icon);
    content: var(--searchbox-icon);
    font-size: var(--searchbox-icon-size);
    color: var(--searchbox-icon-color);
}

/* Dropdown
-------------------------------------------- */
.xSearchBoxDropDown {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9999;
    background-color: var(--searchbox-dropdown-background-color);
    border-width: var(--searchbox-dropdown-border-width);
    border-style: var(--searchbox-dropdown-border-style);
    border-color: var(--searchbox-dropdown-border-strong);
}

/* Needs to be organized
--------------------------------------------
--------------------------------------------
--------------------------------------------
-------------------------------------------- */
.xSearchBox[displayMode="dropdown"],
.xSearchBox[optionSelector="true"] { background-image: url(sbArrow.png); }

.xSearchBoxDropDown > .xSearching {
    padding: var(--searchbox-searching-padding);    
    font-family: var(--searchbox-searching-font-family);
    font-size: var(--searchbox-searching-font-size);
    font-style: var(--searchbox-searching-font-style);
    font-weight: var(--searchbox-searching-letter-spacing);
    letter-spacing: var(--searchbox-searching-letter-spacing);
    line-height: var(--searchbox-searching-line-height);
}

.xSearchBoxDropDown > .xClear,
.xSearchBoxDropDown > .xNav { position: relative; }

.xSearchBoxDropDown > .xNav > .xPrev,
.xSearchBoxDropDown > .xNav > .xNext {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 15px;
    background-position: center center;
    background-repeat: no-repeat;
}
.xSearchBoxDropDown > .xNav > .xPrev { background-image: url(navPrev.png); }
.xSearchBoxDropDown > .xNav > .xNext { background-image: url(navNext.png); }

.xSearchBoxDropDown > .xClear > .xText,
.xSearchBoxDropDown > .xNav > .xText {
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    right: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.xSearchBoxDropDown > .xClear {
    cursor: pointer;
    background-image: url(sbDelete.png);
    background-repeat: no-repeat;
    background-position: 4px 4px;
}

.xSearchBoxDropDown > .xClear > .xText { left: 20px; right: 0; }
.xSearchBoxDropDown > .xClear[sel] { background-color: #eaf3ff; }
.xSearchBoxDropDown > .xClear:hover { background-color: #bddbff; }

.xSearchBoxDropDown > .xItems { max-height: 250px; overflow: auto; overflow-x: hidden; }
.xSearchBoxDropDown > .xItems > .xItem { padding: 4px 8px; white-space: nowrap; cursor: pointer; }
.xSearchBoxDropDown > .xItems > .xItem[rowType] > .xPrimary > span.item:before { position: relative; top: 2px; left: 2px; width: 20px; display: inline-block; }
.xSearchBoxDropDown > .xItems > .xItem[rowType="C"] > .xPrimary>span.item:before { content: url(../../../site/Styles/Core/iconTokenCategory.png); }
.xSearchBoxDropDown > .xItems > .xItem[rowType="S"] > .xPrimary>span.item:before { content: url(../../../site/Styles/Core/iconTokenSelection.png); }
.xSearchBoxDropDown > .xItems > .xItem[rowType="O"] > .xPrimary>span.item:before { content: url(../../../site/Styles/Core/iconTokenOption.png); }
.xSearchBoxDropDown > .xItems > .xItem[rowType="P"] > .xPrimary>span.item:before { content: url(../../../site/Styles/Core/iconTokenProperty.png); }
.xSearchBoxDropDown > .xItems > .xItem[rowType="R"] > .xPrimary>span.item:before { content: url(../../../site/Styles/Core/iconTokenRule.png); }
.xSearchBoxDropDown > .xItems > .xItem[rowType="F"] > .xPrimary>span.item:before { content: url(../../../site/Styles/Core/iconTokenFormula.png); }

.xItem[excl] { color: var(--disabled-tertiary); }
.xItem[req] { font-weight: bold; }
.xItem[sel] { background-color: #eaf3ff; }
.xItem:hover { background-color: var(--background-tone-100); }
.xItem > div { max-width: 350px; overflow: hidden; text-overflow: ellipsis; }
.xSubItem { white-space: nowrap; }
.xMatch { font-weight: var(--searchbox-item-font-weight--emphasis); color: var(--searchbox-item-text-color--emphasis); }

.xSearchBoxDropDown > .xItems > .xItem > .xPrimary {}
.xSearchBox[optionSelector] { margin-top: 3px; height: 20px; }
.xSearchBox[optionSelector]>input { font-weight: bold; height: auto; }