@font-face {
    font-family: 'Urbanist';
    src: url('../fonts/Urbanist-VariableFont_wght.woff2') format('woff2'),
         url('../fonts/Urbanist-VariableFont_wght.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Urbanist';
    src: url('../fonts/Urbanist-Italic-VariableFont_wght.woff2') format('woff2'),
         url('../fonts/Urbanist-Italic-VariableFont_wght.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

:root 
{
    --primary-colour : #000;
    --secondary-colour : #fff;
    --hover-colour: #8e8e8e;
}

.document-search
{
    & .filters    
    {
        display: flex;
        justify-content: flex-end;
        flex-direction: column;

        & .dropdowns {
            display: flex;
            flex-direction: row;
            gap: 10px;
            margin-bottom: 1rem;
        }
    
        & .documentSearchInput {
            width: 96%;
        }
    
        & select, input {
            width: 250px;
            padding: 8px 12px;
            font-size: 16px;
            border: 1px solid var(--primary-colour);
            border-radius: 6px;
            background-color: var(--secondary-colour);
            appearance: none;
            background-size: 16px;
            transition: border-color 0.2s ease-in-out;
        }
        
        & select 
        {
            background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23333" class="bi bi-caret-down-fill" viewBox="0 0 16 16"><path d="M7.247 11.14l-4.796-5.481C2.008 5.399 2.605 4.5 3.5 4.5h9c.896 0 1.492.9.95 1.159l-4.796 5.48a1 1 0 0 1-1.408 0z"/></svg>');
            background-repeat: no-repeat;
            background-position: right 10px center;
            cursor: pointer;

            &:focus {
                border-color: var(--hover-colour);
                outline: none;
            }    
        }
    
        & button 
        {
            padding: 8px 12px;
            font-size: 16px;
            border: 1px solid var(--primary-colour);
            border-radius: 6px;
            background-color: var(--secondary-colour);
            appearance: none;
            background-size: 16px;
            width: fit-content;

            &:hover 
            {
                cursor: pointer;
                background-color: var(--hover-colour);
            }
        }
    }
    
    &:has(.loading)
    {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    & .loading 
    {
        width: 4rem;
        animation: rotate 2s linear infinite;
    }    
}    

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}

@media only screen and (max-width: 780px) {
    .dropdowns {
        flex-direction: column !important;
        align-items: flex-end !important;
    }

    .dropdowns select {
        width: 100% !important;
    }
}