/* Color Select Dropdown Styles */


/*

    <main class="pergoline-select-container">
        <section class="pergoline-select">
            <button
                class="pergoline-select-trigger"
                aria-haspopup="listbox"
                aria-expanded="false"
                data-el="button-1"
            >
                <div class="pergoline-select-content">
                    <div class="pergoline-select-checkbox-indicator"></div>
                    <div class="pergoline-select-label">
                        <template data-el="show">Ral 9010 (bílá)</template>
                        <template data-el="show-2">Ral 9016 (bílá dopravní)</template>
                        <template data-el="show-3">Ral 7035 (světle šedá)</template>
                    </div>
                </div>
                <svg
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    class="pergoline-select-chevron-icon"
                    data-el="svg-1"
                >
                    <path
                        d="M6 9L12 15L18 9"
                        stroke="#060606"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    ></path>
                </svg>
            </button>
            <template data-el="show-4">
                <ul role="listbox" class="dropdown-menu">
                    <li class="dropdown-option" role="option" tabindex="0" data-el="div-1">
                        <div class="option-indicator"></div>
                        <span class="option-label">Ral 9010 (bílá)</span>
                    </li>
                    <li class="dropdown-option" role="option" tabindex="0" data-el="div-2">
                        <div class="option-indicator"></div>
                        <span class="option-label">Ral 9016 (bílá dopravní)</span>
                    </li>
                    <li class="dropdown-option" role="option" tabindex="0" data-el="div-3">
                        <div class="option-indicator"></div>
                        <span class="option-label">Ral 7035 (světle šedá)</span>
                    </li>
                </ul>
            </template>
        </section>
    </main>

*/


.pergoline-select-container {
    font-family: Montserrat, -apple-system, Roboto, Helvetica, sans-serif;
    max-width: 400px;
    margin: 0 auto;
}

.pergoline-select {
    position: relative;
    width: 100%;
}

.pergoline-select-trigger {
    display: flex;
    padding: 8px;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: 1px solid #d9d9d9;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
    background-color: #fff;
}

.pergoline-select-trigger:hover {
    border-color: #8f8f8f;
}

.pergoline-select-trigger:focus {
    border-color: #1e1e1e;
    box-shadow: 0 0 0 2px rgba(30, 30, 30, 0.1);
}

.pergoline-select-content {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 0 0;
}

.pergoline-select-checkbox-indicator {
    width: 18px;
    height: 18px;
    border-radius: 2px;
    border: 1px solid #8f8f8f;
    background-color: #fff;
}

.pergoline-select-label {
    color: #1e1e1e;
    font-size: 14px;
    font-weight: 500;
    line-height: 150%;
}

.pergoline-select-chevron-icon {
    transition: transform 0.2s;
}

.pergoline-select-chevron-icon-flip {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    border: 1px solid #d9d9d9;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    background-color: #fff;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pergoline-select-option {
    display: flex;
    padding: 8px;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.pergoline-select-option:hover {
    background: #f5f5f5;
}

.pergoline-select-option:focus {
    background: #f5f5f5;
    outline: none;
}

.pergoline-select-option-indicator {
    width: 18px;
    height: 18px;
    border-radius: 2px;
    border: 1px solid #8f8f8f;
    background-color: #fff;
}

.pergoline-select-option-label {
    color: #1e1e1e;
    font-size: 14px;
    font-weight: 500;
    line-height: 150%;
}

/* Selected state styling */
.pergoline-select-option[aria-selected="true"] .option-indicator {
    background-color: #1e1e1e;
}

/* Responsive design */
@media (max-width: 480px) {
    .color-select-container {
        max-width: 100%;
        padding: 0 16px;
    }
}

/* Disabled */

.pergoline-select.disabled > .pergoline-select-trigger {
    pointer-events: none;
    cursor: not-allowed;
    background-color: #f0f0f0;
}