.tg-search-form {
    position: relative;
}

.tg-search-pill {
    flex-wrap: nowrap;
    position: relative;
}

.tg-search-pill .form-control,
.tg-search-pill .btn {
    min-height: 46px;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: rgba(84, 110, 137, .72);
}

.tg-search-pill .form-control {
    width: 100% !important;
    padding-left: 1.25rem;
    padding-right: 3.4rem;
    font-size: 1.05rem;
    font-weight: 500;
}

.tg-search-form[data-search-show-footer="false"] .tg-search-pill .form-control {
    padding-right: 5.8rem;
    border-top-right-radius: var(--bs-border-radius-pill) !important;
    border-bottom-right-radius: var(--bs-border-radius-pill) !important;
}

.tg-search-pill input[type="search"]::-webkit-search-cancel-button {
    display: none;
}

.tg-search-clear-btn {
    position: absolute;
    z-index: 7;
    top: 50%;
    right: calc(58px + 0.65rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    color: var(--bs-secondary-color);
    background: transparent;
    border: 0;
    border-radius: 999px;
    transform: translateY(-50%);
}

.tg-search-clear-btn:hover,
.tg-search-clear-btn:focus-visible {
    color: var(--bs-body-color);
    background: rgba(108, 117, 125, 0.16);
    outline: none;
}

.tg-search-clear-btn[data-search-clear-empty="true"],
.tg-search-pill .form-control:placeholder-shown + .tg-search-clear-btn {
    display: none;
}

.tg-search-form[data-search-show-footer="false"] .tg-search-clear-btn {
    right: 3.35rem;
}

.tg-search-pill .form-control::placeholder {
    color: var(--bs-secondary-color);
    opacity: 1;
}

.tg-search-pill .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 58px;
    width: 58px;
    padding-inline: 1.15rem;
    font-size: 1.35rem;
}

.tg-search-indicator {
    position: absolute;
    z-index: 6;
    top: 50%;
    right: 1.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    color: var(--bs-secondary-color);
    font-size: 1.35rem;
    pointer-events: none;
    transform: translateY(-50%);
}

.tg-search-pill #search-button,
.tg-search-pill #sidebar-search-button {
    height: auto;
    margin-left: -1px;
}

.tg-search-pill .form-control:focus,
#searchbar.tg-search-pill .form-control:focus,
#side-searchbar.tg-search-pill .form-control:focus {
    background-color: var(--bs-body-bg) !important;
    border-color: rgba(84, 110, 137, .92) !important;
    box-shadow: none !important;
}

.tg-search-form[data-search-show-footer="false"] .tg-search-pill .form-control:focus ~ .tg-search-indicator {
    color: var(--bs-secondary-color);
}

.tg-search-pill .btn:hover,
.tg-search-pill .btn:focus,
.tg-search-pill .btn:focus-visible {
    flex-basis: 58px;
    width: 58px;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg) !important;
    border-color: rgba(84, 110, 137, .72) !important;
    box-shadow: none !important;
}

.tg-search-suggestions {
    position: fixed;
    z-index: 1080;
    top: 0;
    left: 0;
    display: none;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: min(70vh, 460px);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: var(--bs-body-bg);
    border: 1px solid rgba(108, 117, 125, 0.35);
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
    scrollbar-color: rgba(108, 117, 125, 0.65) transparent;
}

.tg-search-suggestions.is-open {
    display: block;
}

.tg-search-suggestions::-webkit-scrollbar {
    width: 12px;
}

.tg-search-suggestions::-webkit-scrollbar-track {
    background: transparent;
    margin-block: 8px;
}

.tg-search-suggestions::-webkit-scrollbar-thumb {
    background-color: rgba(108, 117, 125, 0.65);
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: content-box;
}

.tg-search-suggestion-group + .tg-search-suggestion-group {
    border-top: 1px solid rgba(108, 117, 125, 0.2);
}

.tg-search-suggestion-label {
    padding: 0.65rem 0.75rem 0.2rem;
}

.tg-search-source-badge {
    --tg-search-source-bg: rgba(108, 117, 125, 0.14);
    --tg-search-source-border: rgba(108, 117, 125, 0.36);
    --tg-search-source-color: #495057;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 1.45rem;
    padding: 0.28rem 0.58rem;
    width: 100%;
    color: var(--tg-search-source-color);
    background: var(--tg-search-source-bg);
    border: 1px solid var(--tg-search-source-border);
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
}

.tg-search-source-badge--machine {
    --tg-search-source-bg: rgba(46, 125, 50, 0.15);
    --tg-search-source-border: rgba(46, 125, 50, 0.36);
    --tg-search-source-color: #2e6b34;
}

.tg-search-source-badge--market-listing {
    --tg-search-source-bg: rgba(13, 110, 253, 0.14);
    --tg-search-source-border: rgba(13, 110, 253, 0.34);
    --tg-search-source-color: #0b5ed7;
}

.tg-search-source-badge--forum-post {
    --tg-search-source-bg: rgba(111, 66, 193, 0.14);
    --tg-search-source-border: rgba(111, 66, 193, 0.34);
    --tg-search-source-color: #5f3db1;
}

[data-bs-theme="dark"] .tg-search-source-badge--machine {
    --tg-search-source-bg: rgba(123, 184, 132, 0.18);
    --tg-search-source-border: rgba(154, 191, 170, 0.42);
    --tg-search-source-color: #b8d9bf;
}

[data-bs-theme="dark"] .tg-search-source-badge--market-listing {
    --tg-search-source-bg: rgba(77, 148, 255, 0.18);
    --tg-search-source-border: rgba(116, 171, 255, 0.44);
    --tg-search-source-color: #bdd8ff;
}

[data-bs-theme="dark"] .tg-search-source-badge--forum-post {
    --tg-search-source-bg: rgba(181, 146, 255, 0.18);
    --tg-search-source-border: rgba(199, 170, 255, 0.44);
    --tg-search-source-color: #dccbff;
}

[data-bs-theme="dark"] .tg-search-pill .form-control,
[data-bs-theme="dark"] .tg-search-pill .btn {
    color: var(--tg-dark-text);
    background-color: var(--tg-dark-surface) !important;
    border-color: rgba(92, 118, 148, .78) !important;
}

[data-bs-theme="dark"] .tg-search-pill .form-control::placeholder {
    color: var(--tg-dark-text-muted);
}

[data-bs-theme="dark"] .tg-search-indicator {
    color: var(--tg-dark-text-muted);
}

[data-bs-theme="dark"] .tg-search-pill .form-control:focus {
    color: var(--tg-dark-text);
    background-color: var(--tg-dark-surface) !important;
    border-color: rgba(92, 118, 148, .78) !important;
    box-shadow: none !important;
}

[data-bs-theme="dark"] .tg-search-pill .btn:hover,
[data-bs-theme="dark"] .tg-search-pill .btn:focus-visible {
    color: var(--tg-dark-text);
    background-color: var(--tg-dark-surface) !important;
    border-color: rgba(92, 118, 148, .78) !important;
    box-shadow: none !important;
}

[data-bs-theme="dark"] .navbar-search-form .tg-search-pill .form-control,
[data-bs-theme="dark"] .navbar-search-form .tg-search-pill .btn,
[data-bs-theme="dark"] .navbar-search-form .tg-search-pill .btn:hover,
[data-bs-theme="dark"] .navbar-search-form .tg-search-pill .btn:focus,
[data-bs-theme="dark"] .navbar-search-form .tg-search-pill .btn:focus-visible {
    color: var(--tg-navbar-search-color);
    background-color: transparent !important;
    border-color: var(--tg-navbar-search-color) !important;
}

[data-bs-theme="dark"] .navbar-search-form .tg-search-pill .form-control:focus,
[data-bs-theme="dark"] #navbar-searchbar.tg-search-pill .form-control:focus {
    color: var(--tg-navbar-search-hover-color);
    background-color: transparent !important;
    border-color: var(--tg-navbar-search-hover-color) !important;
}

[data-bs-theme="dark"] .navbar-search-form .tg-search-pill .form-control::placeholder,
[data-bs-theme="dark"] .navbar-search-form .tg-search-clear-btn {
    color: var(--tg-navbar-search-color);
}

[data-bs-theme="dark"] .navbar-search-form .tg-search-clear-btn:hover,
[data-bs-theme="dark"] .navbar-search-form .tg-search-clear-btn:focus-visible {
    color: var(--tg-navbar-search-hover-color);
    background: rgba(255, 255, 255, 0.16);
}

[data-bs-theme="dark"] .navbar-search-form:hover .tg-search-pill .form-control,
[data-bs-theme="dark"] .navbar-search-form:hover .tg-search-pill .form-control::placeholder,
[data-bs-theme="dark"] .navbar-search-form:hover .tg-search-pill .btn,
[data-bs-theme="dark"] .navbar-search-form:hover .tg-search-clear-btn,
[data-bs-theme="dark"] .navbar-search-form:focus-within .tg-search-pill .form-control,
[data-bs-theme="dark"] .navbar-search-form:focus-within .tg-search-pill .form-control::placeholder,
[data-bs-theme="dark"] .navbar-search-form:focus-within .tg-search-pill .btn,
[data-bs-theme="dark"] .navbar-search-form:focus-within .tg-search-clear-btn {
    color: var(--tg-navbar-search-hover-color);
}

[data-bs-theme="dark"] .navbar-search-form:hover .tg-search-pill .form-control,
[data-bs-theme="dark"] .navbar-search-form:hover .tg-search-pill .btn,
[data-bs-theme="dark"] .navbar-search-form:focus-within .tg-search-pill .form-control,
[data-bs-theme="dark"] .navbar-search-form:focus-within .tg-search-pill .btn {
    border-color: var(--tg-navbar-search-hover-color) !important;
}

.tg-search-suggestion-item {
    column-gap: 1rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    padding: 0.5rem 0.75rem;
    color: var(--bs-body-color);
    text-decoration: none;
}

.tg-search-suggestion-item:hover,
.tg-search-suggestion-item:focus,
.tg-search-suggestion-item.is-active {
    background: rgba(13, 110, 253, 0.12);
    color: var(--bs-body-color);
    outline: none;
}

.tg-search-suggestion-title-row {
    display: block;
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

.tg-search-suggestion-title {
    display: block;
    min-width: 0;
    overflow: hidden;
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tg-search-suggestion-date {
    color: var(--bs-primary);
    grid-column: 1 / -1;
    justify-self: start;
    max-width: 14rem;
    overflow: hidden;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tg-search-suggestion-meta {
    display: block;
    grid-column: 1 / -1;
    overflow: hidden;
    color: var(--bs-secondary-color);
    font-size: 0.88rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tg-search-suggestion-snippet {
    display: block;
    grid-column: 1 / -1;
    overflow: hidden;
    color: var(--bs-secondary-color);
    font-size: 0.78rem;
    line-height: 1.2;
    opacity: 0.86;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tg-search-suggestion-empty {
    padding: 0.8rem 0.9rem;
    color: var(--bs-secondary-color);
    font-weight: 700;
}

.tg-search-suggestion-footer {
    display: block;
    padding: 0.55rem 0.75rem;
    border-top: 1px solid rgba(108, 117, 125, 0.2);
    color: var(--bs-link-color);
    font-weight: 700;
    text-decoration: none;
}

.tg-search-suggestion-footer:hover,
.tg-search-suggestion-footer:focus {
    background: rgba(13, 110, 253, 0.12);
}
