﻿.global-search-modal {
    letter-spacing: 0;
}

.global-search-modal .modal-header {
    margin-bottom: 0;
    padding-bottom: 0.25rem;
    border: none;
}

.global-search-modal .global-search-input {
    position: relative;
    width: 100%;
    height: 3rem;
    margin-bottom: 1rem;
}

    .global-search-modal .global-search-input input {
        padding-left: 1rem;
        width: 100%;
        border-radius: 9999px;
        border: 1px solid hsl(0 0% 89.8%);
        outline: none !important;
        font-size: 1rem;
        padding: 0 3rem;
        height: 100%;
        color: var(--search-input-color);
        transition: border 150ms linear;
    }

        .global-search-modal .global-search-input input:hover {
            border-color: hsl(0 0% 63.9%);
        }

        .global-search-modal .global-search-input input:focus {
            border-color: hsl(0 0% 63.9%);
        }

        .global-search-modal .global-search-input .global-search-icon {
            position: absolute;
            top: 0;
            left: 1rem;
            height: 100%;
            display: flex;
            align-items: center;
            font-size: 1.25rem;
        }

    .global-search-modal .global-search-input .global-search-loading-icon {
        position: absolute;
        top: 0;
        right: 1rem;
        height: 100%;
        display: flex;
        align-items: center;
    }

        .global-search-modal .global-search-input .global-search-loading-icon .spinner-border {
            --bs-spinner-width: 1.25rem;
            --bs-spinner-height: 1.25rem;
            --bs-spinner-border-width: 0.1em;
        }

.global-search-modal .modal-body {
    border: none;
}

.global-search-modal .global-search-results {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    padding: 1rem;
  
    border-top: 1px solid rgb(212,212, 212);
}

.global-search-modal .global-search-section-title {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.05rem;
}

    .global-search-modal .list-group-item .floating-badge {
        display: flex;
        flex-wrap: nowrap;
        column-gap:0;
        opacity: 0;
    }
        .global-search-modal .list-group-item .floating-badge,
        .global-search-modal .list-group-item .floating-badge i {
            transition: all 150ms linear;
        }

        .global-search-modal .list-group-item .floating-badge i:first-child {
            transform: translateX(-0.5rem);
        }
        .global-search-modal .list-group-item .floating-badge i:last-child {
            transform: translateX(-0.5rem);
        }

        .global-search-modal .list-group-item:hover .floating-badge {
            opacity: 1;
        }

    .global-search-modal .list-group-item:hover .floating-badge i:first-child {
        transform: translateX(0.5rem);
    }

    .global-search-modal .list-group-item:hover .floating-badge i:last-child {
        transform: translateX(0);
    }

    .global-search-modal .btn-link {
        display: flex;
        flex-wrap: nowrap;
        padding: 0.25rem 0.5rem;
        background: transparent;
        border-radius: 0.5rem;
        color: hsl(0 0% 25.1%);
        font-size: 0.9rem;
        text-decoration: none;
        letter-spacing: 0;
        border: 1px solid hsl(0 0% 89.8%);
        transition: all 150ms linear;
    }
        .global-search-modal .btn-link:hover {
            background: hsl(0 0% 98%);
            border-color: hsl(0 0% 89.8%);
            color: hsl(0 0% 9%);
        }

    .global-search-modal .list-group-item {
        color: hsl(0 0% 25.1%);
    }

        .global-search-modal .list-group-item:hover {
            background: hsl(0 0% 96.1%);
            color: hsl(0 0% 9%);
        }

    .global-search-modal .list-group-item a {
        text-decoration: none;
        color: inherit;
        transition: color 150ms linear;
    }

.btn-global-search {
    position: relative;    
    padding: 0 1rem;
    border: 1px solid hsl(215 16.3% 46.9%);
    border-radius: 9999px;
    height: 3rem;
    width: 100%;
    color: hsl(215 16.3% 60.6%);
    letter-spacing: 0;
    transition: all 150ms linear;
}

    .btn-global-search:hover {
        background: rgba(255, 255, 255, 0.025);
        border-color: hsl(215 16.3% 56.9%);
        color: hsl(215 16.3% 70.6%);
    }

    .btn-global-search button {
        all: unset;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        font-weight: 400;
        font-size: 1rem;
        color: inherit;
        width:100%;
        height:100%;
        column-gap: 2rem;
    }

    @media screen and (min-width: 762px) {
        .btn-global-search button {
            min-width: 250px;
        }
    }