.search-bar{
    border-radius: var(--radius-3);
    padding: var(--size-2) var(--size-3);
    border: var(--stone-4) var(--border-size-1) solid;
    box-shadow: var(--inner-shadow-1);
    resize: none;
    max-height: 200px;
    overflow-y: auto;
    flex-grow: 1;
    min-width: 600px;

    &:hover{
        box-shadow: var(--inner-shadow-3);
    }

    &:focus{
        box-shadow: var(--inner-shadow-4);
        outline-width: 0px;
    }

}

.search-bar.faux{
    text-decoration: none;
    background-color: transparent; /* No background color change */
    color: #000; /* Keep text color same */
    border-color: #ccc; /* Keep border color same */
    color: #aaa; /* Light gray color for placeholder text */
    cursor: text; /* Change cursor to text when hovering */
}

search {
    form{
        button{
            flex-grow: 0;
            cursor: pointer;
            display: flex;
            align-items: center;
            background-color: black;
            border: 2px solid black;
            border-radius: var(--radius-2);

            svg{
                width: 24px;
                height: 24px;
                stroke: white;
            }

            &:hover{
                box-shadow: var(--shadow-3);
            }
        }
    }
}

.search-container{
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-container{
    width: 100%;
    height: 90vh;
}

.search-show-container{
    display: flex;

    .matches{
        flex: 0 0 25%;
        display: flex;
        flex-direction: column;
        border-right: var(--stone-4) var(--border-size-1) solid;
    }

    .messages{
        flex: 1;
    }
}