/* wwwroot/css/custom-select.css */

.custom-select {
    position: relative;
    display: inline-block;
    font-family: sans-serif;
}

    /* Pole wyświetlające wybraną opcję */
    .custom-select .selected {
        position: relative; /* dla absolutnej strzałki */
        border: 1px solid #ccc;
        padding: 6px 8px; /* padding wokół tekstu */
        background: white;
        cursor: pointer;
        border-radius: 4px;
        color: #222;
        min-width: 300px; /* minimalna szerokość pola */
        box-sizing: border-box;
    }

    /* Strzałka po prawej stronie */
    .custom-select .arrow {
        position: absolute;
        right: 8px; /* odsunięcie od prawej krawędzi */
        top: 50%; /* wycentrowanie pionowe */
        transform: translateY(-50%);
        color: #555;
        font-size: 12px;
        pointer-events: none; /* nie blokuje kliknięć */
    }

    /* Lista rozwijana */
    .custom-select .options {
        position: absolute;
        top: 0; /* na polu */
        left: 0;
        min-width: 300px; /* minimalna szerokość listy */
        background: white;
        border: 1px solid #ccc;
        border-radius: 4px;
        z-index: 100;
        display: none; /* włączamy przez IsOpen */
        box-sizing: border-box;
        list-style: none; /* usuwa kropki */
        padding: 0; /* usuwa padding domyślny ul */
        margin: 0; /* usuwa margines domyślny ul */
        white-space: nowrap; /* nie łamie tekstu w opcjach */
    }

    /* Widoczna lista po rozwinięciu */
    .custom-select.open .options {
        display: block;
    }

    /* Pojedyncza opcja */
    .custom-select .option-item {
        padding: 6px 8px;
        cursor: pointer;
        min-height: 24px; /* minimalna wysokość opcji */
        align-items: center; /* wyśrodkowanie pionowe tekstu/html w opcji */
        display: flex; /* wymusza wysokość i umożliwia centrowanie */
        box-sizing: border-box; /* uwzględnia padding w wysokości */
    }

        /* Hover nad opcją */
        .custom-select .option-item:hover {
            background-color: #f0f0f0;
        }