@import "./results-table.css";
@import "./results-grid.css";

#searchForm {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;

    #searchInputs {
        display: flex;
        gap: 1.5rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    #searchButton {
        .state-loading { display: none; }

        &.btn-loading {
            pointer-events: none;
            opacity: var(--bs-btn-disabled-opacity);

            .state-idle { display: none; }

            .state-loading {
                display: inline;

                .bi::before {
                    animation: spin 2s ease-in-out infinite;
                }
            }
        }
    }
}

#searchResults {
    align-self: stretch;
    
    .card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        flex-wrap: wrap;

        .results-view-toggle {
            display: inline-flex;
            gap: 0.5rem;
            padding: 4px;
            border-radius: var(--bs-border-radius);
            background-color: var(--card-bg);

            .btn {
                border: none;
                font-weight: bold;
                padding: 0.3rem 1rem;
                color: var(--text-secondary);
            }
        }
    }

    .results-view {
        display: none;
    }
    
    &[data-view='grid'] .results-view.grid-view,
    &[data-view='table'] .results-view.table-view {
        display: block;
    }

    &[data-view='grid'] .results-view-toggle .grid-button,
    &[data-view='table'] .results-view-toggle .table-button {
        background-color: var(--main-color);
        color: white;
    }
}

@media (max-width: 670px) {
    #searchInputs {
        flex-direction: column;
    }

    #searchResults {
        .card-header {
            justify-content: center;

            .results-view-toggle {
                width: 100%;

                .btn {
                    flex: 1 1 0;
                }
            }
        }

        .card-content {
            padding-inline: 0.5rem;
        }
    } 

    #resultsCardGrid {
        .result-card {
            grid-template-columns: 92px minmax(0, 1fr);
            gap: 0.85rem;
        }
    }
}