prestashop-entity-selector/sources/scss/components/_method-dropdown.scss

/**
 * Method Dropdown Component
 * Custom select dropdown with icons for method selection
 */

@use '../variables' as *;
@use '../mixins' as *;

.entity-selector-trait {

    // Method dropdown trigger button
    .method-dropdown-trigger {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        min-height: 36px;
        padding: 0.25rem $es-spacing-md;
        border-radius: $es-radius-md;
        background: $es-white;
        color: $es-slate-800;
        font-size: $es-font-size-sm;
        cursor: pointer;
        transition: all $es-transition-fast;
        min-width: 180px;
        max-width: 320px;
        border: 1px solid $es-border-color;

        &:hover {
            background: $es-slate-50;
            border-color: $es-gray-300;
        }

        &:focus,
        &:active {
            outline: none;
            border-color: $es-primary;
            box-shadow: 0 0 0 3px rgba($es-primary, 0.1);
        }
    }

    .method-trigger-icon {
        font-size: $es-font-size-sm;
        color: $es-text-muted;
        flex-shrink: 0;
        width: 18px;
        text-align: center;
    }

    .method-trigger-label {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: $es-font-weight-medium;
        line-height: 1.4;
    }

    .method-trigger-caret {
        font-size: $es-font-size-xs;
        color: $es-slate-400;
        flex-shrink: 0;
        margin-left: auto;
    }

    // Locked state
    .selector-locked .method-dropdown-trigger {
        background: $es-slate-100;
        color: $es-slate-400;
        cursor: not-allowed;
        border-color: $es-border-color;

        &:hover {
            background: $es-slate-100;
            border-color: $es-border-color;
        }
    }

    // Method selector wrapper
    .method-selector-wrapper {
        position: relative;
    }

    // Hidden select (for form submission)
    .method-select-hidden {
        position: absolute !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
}

// Global fallback for hidden method selects
.method-select-hidden {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

// =============================================================================
// Method Dropdown Menu (appended to body, outside trait wrappers)
// =============================================================================

.method-dropdown-menu {
    position: absolute;
    z-index: $es-z-dropdown + 1;
    min-width: 200px;
    max-width: 360px;
    max-height: 400px;
    overflow-y: auto;
    background: $es-white;
    border-radius: $es-radius-lg;
    padding: 0.375rem 0;
    border: 1px solid $es-border-color;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    animation: methodDropdownFadeIn 0.15s ease;
    @include custom-scrollbar;
}

@keyframes methodDropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

// Method dropdown item
.method-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem $es-spacing-md;
    cursor: pointer;
    transition: background-color 0.1s;
    position: relative;

    &:hover {
        background: $es-slate-100;
    }

    &.selected {
        background: rgba($es-primary, 0.08);
    }

    .method-item-icon {
        font-size: $es-font-size-sm;
        color: $es-text-muted;
        width: 18px;
        text-align: center;
        flex-shrink: 0;
    }

    &.selected .method-item-icon {
        color: $es-primary;
    }

    .method-item-label {
        flex: 1;
        font-size: $es-font-size-sm;
        color: $es-slate-700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    &.selected .method-item-label {
        color: $es-cyan-700;
        font-weight: $es-font-weight-medium;
    }

    .method-item-check {
        font-size: $es-font-size-xs;
        flex-shrink: 0;
        margin-left: auto;
        color: $es-primary;
    }
}

// Method dropdown optgroup
.method-dropdown-optgroup {
    margin-top: 0.25rem;

    &:first-child {
        margin-top: 0;
    }
}

.method-optgroup-label {
    padding: 0.5rem $es-spacing-md;
    font-size: 11px;
    font-weight: $es-font-weight-semibold;
    color: $es-text-muted;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: $es-slate-50;
    border-top: 1px solid $es-slate-100;
    border-bottom: 1px solid $es-slate-100;

    .method-dropdown-optgroup:first-child & {
        border-top: 0;
    }
}

.method-optgroup-items {
    padding: 0.25rem 0;

    .method-dropdown-item {
        padding-left: $es-spacing-lg;
    }
}

// Method info placeholder
.method-info-placeholder {
    font-size: $es-font-size-xs;
    color: $es-text-muted;
    font-style: italic;
}