.search-wrapper {
    position: relative;
    width: min(320px, 98%);
}

.search-input {
    width: 100%;
    height: 42px;
    line-height: 42px;
    padding-right: 36px;
    padding-left: 34px;
    padding-top: 6px;
    font-size: 16px;

    color: white;
    caret-color: white;

    border: 10px solid transparent;
    border-image: url("../images/ui/panel.png") 7 fill stretch;
    background: transparent;
}

.clear-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);

    font-size: 18px;
    color: white;
    background: none;
    border: none;
    cursor: pointer;

    display: none;
}

.clear-btn:hover {
    color: #d94a5b;
}

.search-wrapper.has-text .clear-btn {
    display: block;
}

.search-input:focus {
    outline: none;
    border-image: url("../images/ui/outline.png") 7 fill stretch;
}
.search-input::placeholder {
    color: rgb(185, 185, 185);
}

.search-input::selection {
    background: rgba(255,255,255,0.3);
    color: white;
}

.search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    pointer-events: none;
}

.search-results {
    position: absolute;
    top: calc(100%);
    left: 0;
    width: 100%;

    max-height: 220px;
    overflow-y: auto; 

    display: none;
    z-index: 9999;

    padding: 0px 2px;
    box-sizing: border-box;

    border: 10px solid transparent;
    border-image: url("../images/ui/panel.png") 7 fill stretch;
    background: rgba(20, 20, 20, 0.96);
}

.search-wrapper.show-results .search-results {
    display: block;
}

.no-results {
    padding: 8px 10px;
    color: #888;
    font-style: italic;
}

.search-result {
    display: block;
    width: 100%;
    padding: 8px 10px;
    font-size: 15px;

    background: transparent;
    border: none;
    color: white;
    text-align: left;
    cursor: pointer;
}

.search-result:hover {
    background: rgba(255, 255, 255, 0.08);
}

.search-results::-webkit-scrollbar {
    width: 6px;
}

.search-results::-webkit-scrollbar-thumb {
    background: rgba(185, 185, 185);
}

.search-results::-webkit-scrollbar-thumb:hover {
    background: #d94a5b;
}