/* =========================================================
   SEARCH
   Neodvisno od Bootstrapa
   ========================================================= */

.sv_search {
    width: 100%;
    min-width: 0;
    color: var(--color_Black);
    font-size: var(--font_size_16);
}

/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */

.sv_search_header {
    width: 100%;
    min-width: 0;
    padding-bottom: var(--space_2);
    border-bottom: var(--space_0_25) solid var(--color_RockBlue_25);
}

    .sv_search_header h1 {
        margin: 0;
        font-family: var(--font_BovinoLight);
        font-size: var(--font_size_32);
        font-weight: normal;
        line-height: 1.1;
    }

/* ---------------------------------------------------------
   Filter grid

   Namizni razpored:

   Naslov | Album / seznam | Poišči
   Oseba  | Funkcija       | prazno
   --------------------------------------------------------- */

.sv_search_filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(var(--space_40), 0.75fr);
    grid-template-areas:
        "song     playlist submit"
        "person   role     empty";
    width: 100%;
    min-width: 0;
    border-bottom: var(--space_0_25) solid var(--color_RockBlue_25);
}

/* ---------------------------------------------------------
   Posamezne skupine filtrov
   --------------------------------------------------------- */

.sv_search_filter_group {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: calc(var(--space_4) * 6.5);
    padding: var(--space_1) var(--space_2) var(--space_3);
    border-right: var(--space_0_25) solid var(--color_RockBlue_25);
    box-sizing: border-box;
}

    .sv_search_filter_group:nth-of-type(1) {
        grid-area: song;
        border-bottom: var(--space_0_25) solid var(--color_RockBlue_25);
    }

    .sv_search_filter_group:nth-of-type(2) {
        grid-area: playlist;
        border-bottom: var(--space_0_25) solid var(--color_RockBlue_25);
    }

    .sv_search_filter_group:nth-of-type(3) {
        grid-area: person;
    }

    .sv_search_filter_group:nth-of-type(4) {
        grid-area: role;
    }

    /* ---------------------------------------------------------
   Labels
   --------------------------------------------------------- */

    .sv_search_filter_group label {
        display: block;
        margin: 0 0 var(--space_1);
        font-family: var(--font_BovinoMedium);
        font-size: var(--font_size_16);
        line-height: 1.2;
    }

    /* ---------------------------------------------------------
   Input in select
   --------------------------------------------------------- */

    .sv_search_filter_group input,
    .sv_search_filter_group select {
        display: block;
        width: 100%;
        min-width: 0;
        min-height: calc(var(--space_4) * 2.7);
        margin: 0;
        padding: var(--space_1) var(--space_2);
        border: var(--space_0_25) solid var(--color_RockBlue_25);
        border-radius: 0;
        outline: none;
        background-color: var(--color_White);
        color: var(--color_LunarGreen);
        font-family: var(--font_BovinoLight);
        font-size: var(--font_size_16);
        line-height: 1.2;
        box-sizing: border-box;
    }

        .sv_search_filter_group input:focus,
        .sv_search_filter_group select:focus {
            border-color: var(--color_RockBlue);
        }

        .sv_search_filter_group input::placeholder {
            color: var(--color_RockBlue_50);
            opacity: 1;
        }

    /* Native select ostane zaprt.
   Ne povečujemo višine samega select elementa na focus. */

    .sv_search_filter_group select {
        cursor: pointer;
    }

/* ---------------------------------------------------------
   Rezultati sprotnega iskanja
   --------------------------------------------------------- */

.sv_search_results {
    position: absolute;
    z-index: 20;
    top: var(--space_18);
    right: var(--space_2);
    left: var(--space_2);
    width: auto;
    min-width: 0;
    max-height: var(--space_64);
    overflow-y: auto;
    background-color: var(--color_White);
    box-sizing: border-box;
}

    .sv_search_results:empty {
        display: none;
    }

    .sv_search_results > * {
        padding: var(--space_2);
        border-right: var(--space_1_25) solid var(--color_RockBlue);
        border-left: var(--space_1_25) solid var(--color_RockBlue);
        background-color: var(--color_White);
        cursor: pointer;
    }

        .sv_search_results > *:last-child {
            border-bottom: var(--space_1_25) solid var(--color_RockBlue);
        }

        .sv_search_results > *:hover,
        .sv_search_results > *[aria-selected="true"] {
            background-color: var(--color_RockBlue_75);
        }

    .sv_search_results::-webkit-scrollbar {
        display: none;
    }

.sv_search_results {
    scrollbar-width: none;
}

/* ---------------------------------------------------------
   Izbrani filtri
   --------------------------------------------------------- */

.sv_search_selected_items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space_1);
    width: 100%;
    min-width: 0;
    padding-top: var(--space_1);
}

.sv_search_selected_item {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: var(--space_0_5) var(--space_1);
    background-color: var(--color_RockBlue_25);
    color: var(--color_LunarGreen);
    font-family: var(--font_BovinoLight);
    font-size: var(--font_size_14);
    line-height: 1.2;
    cursor: pointer;
    box-sizing: border-box;
}

    .sv_search_selected_item:hover {
        background-color: var(--color_RockBlue_50);
    }

/* ---------------------------------------------------------
   Gumb Poišči
   --------------------------------------------------------- */

.sv_search_submit {
    grid-area: submit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    justify-self: center;
    gap: var(--space_1);
    width: calc(100% - var(--space_4));
    min-width: 0;
    min-height: var(--space_14);
    margin: 0;
    padding: var(--space_1) var(--space_2);
    border: 0;
    border-radius: 0;
    background-color: var(--color_RockBlue_25);
    color: var(--color_LunarGreen);
    font-family: var(--font_BovinoMedium);
    font-size: var(--font_size_16);
    line-height: 1.2;
    cursor: pointer;
    box-sizing: border-box;
}

    .sv_search_submit:hover {
        background-color: var(--color_RockBlue_50);
    }

    .sv_search_submit:focus-visible {
        outline: var(--space_0_5) solid var(--color_RockBlue);
        outline-offset: var(--space_0_5);
    }

    .sv_search_submit .svg_icon {
        width: var(--space_6);
        height: var(--space_6);
        flex: 0 0 auto;
        fill: currentColor;
    }

/* ---------------------------------------------------------
   Tabela rezultatov
   --------------------------------------------------------- */

.sv_search_table_wrapper {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
}

.sv_search_table {
    width: 100%;
    min-width: calc(var(--space_4) * 48);
    border-collapse: collapse;
    table-layout: fixed;
    font-family: var(--font_BovinoLight);
}

    .sv_search_table th,
    .sv_search_table td {
        box-sizing: border-box;
    }

    .sv_search_table th {
        padding: var(--space_2);
        background-color: var(--color_RockBlue);
        color: var(--color_White);
        font-family: var(--font_BovinoMedium);
        font-size: var(--font_size_18);
        font-weight: normal;
        line-height: 1.2;
        text-align: left;
        vertical-align: middle;
    }

        .sv_search_table th:first-child {
            width: var(--space_14);
            text-align: center;
        }

        .sv_search_table th:nth-child(2) {
            width: 18%;
        }

        .sv_search_table th:nth-child(3) {
            width: 28%;
        }

        .sv_search_table th:nth-child(4) {
            width: 24%;
        }

        .sv_search_table th:nth-child(5) {
            width: 30%;
        }

    .sv_search_table td {
        padding: var(--space_2);
        border-top: var(--space_0_25) solid var(--color_RockBlue_50);
        vertical-align: middle;
    }

        .sv_search_table td:first-child {
            text-align: center;
        }

    .sv_search_table tbody tr:hover {
        background-color: var(--color_RockBlue_25);
    }

    /* Checkbox brez Bootstrap pravil */

    .sv_search_table input[type="checkbox"] {
        width: calc(var(--space_4) * 1.1);
        height: calc(var(--space_4) * 1.1);
        margin: 0;
        cursor: pointer;
    }

/* ---------------------------------------------------------
   Prenos v player
   --------------------------------------------------------- */

.sv_search_load_player {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--space_4) * 2.7);
    margin-top: var(--space_3);
    padding: var(--space_1) var(--space_2);
    border: 0;
    border-radius: 0;
    background-color: var(--color_RockBlue_75);
    color: var(--color_LunarGreen);
    font-family: var(--font_BovinoMedium);
    font-size: var(--font_size_16);
    cursor: pointer;
}

    .sv_search_load_player:hover {
        background-color: var(--color_RockBlue);
    }

    .sv_search_load_player:focus-visible {
        outline: var(--space_0_5) solid var(--color_RockBlue);
        outline-offset: var(--space_0_5);
    }

/* ---------------------------------------------------------
   Srednja širina
   --------------------------------------------------------- */

@media only screen and (max-width: 64em) {
    .sv_search_filters {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "song     playlist"
            "person   role"
            "submit   submit";
    }

    .sv_search_filter_group:nth-of-type(2),
    .sv_search_filter_group:nth-of-type(4) {
        border-right: 0;
    }

    .sv_search_filter_group:nth-of-type(3),
    .sv_search_filter_group:nth-of-type(4) {
        border-bottom: var(--space_0_25) solid var(--color_RockBlue_25);
    }

    .sv_search_submit {
        width: calc(100% - var(--space_4));
        margin-block: var(--space_2);
    }
}

/* ---------------------------------------------------------
   Mobilni prikaz
   --------------------------------------------------------- */

@media only screen and (max-width: 48em) {
    .sv_search_filters {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "song"
            "playlist"
            "person"
            "role"
            "submit";
    }

    .sv_search_filter_group {
        border-right: 0;
        border-bottom: var(--space_0_25) solid var(--color_RockBlue_25);
    }

    .sv_search_submit {
        width: calc(100% - var(--space_4));
    }

    .sv_search_table_wrapper {
        overflow-x: auto;
    }
}