prestashop-entity-selector/sources/scss/components/_value-picker.scss

/**
 * Value Picker Component
 * Search boxes, input types, range inputs
 */

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

.target-conditions-trait,
.entity-selector-trait {

    // Value picker container
    .value-picker {
        padding: $es-spacing-sm 0;

        &[style*="display: none"],
        &[style*="display:none"] {
            padding: 0;
        }
    }

    .include-picker,
    .exclude-picker {
        // Section-specific picker styles
    }

    // Entity search box
    .entity-search-box {
        position: relative;
        display: flex;
        align-items: center;
        gap: $es-spacing-sm;
        padding: $es-spacing-xs;
        background: $es-white;
        border: 1px solid $es-border-color;
        border-radius: $es-radius-md;
        transition: all $es-transition-fast;

        &:focus-within {
            border-color: $es-primary;
            box-shadow: 0 0 0 2px rgba($es-primary, 0.1);
        }
    }

    // Separation between chips and search box
    .chips-wrapper + .entity-search-box {
        margin-top: $es-spacing-md;
    }

    .entity-search-icon {
        color: $es-text-muted;
        font-size: 14px;
        flex-shrink: 0;
        margin-left: $es-spacing-xs;
    }

    // Override parent form's max-width on search input
    input.entity-search-input,
    input.entity-search-input[type="text"] {
        @include input-reset;
        flex: 1;
        min-width: 0;
        width: auto !important;
        max-width: none !important;
        padding: 0.375rem;
        font-size: $es-font-size-sm;
        color: $es-text-primary;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;

        &::placeholder {
            color: $es-text-muted;
        }

        &:focus {
            border: none !important;
            box-shadow: none !important;
            outline: none;
        }
    }

    .search-loading {
        display: flex;
        align-items: center;
        justify-content: center;
        color: $es-primary;

        i {
            animation: spin 0.6s linear infinite;
        }
    }

    // Browse tree button (for categories)
    .btn-browse-tree {
        @include button-reset;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        margin-left: auto;
        color: $es-primary;
        background: $es-primary-light;
        border-radius: $es-radius-sm;
        flex-shrink: 0;
        transition: all $es-transition-fast;

        &:hover {
            background: $es-primary;
            color: $es-white;
        }

        i {
            font-size: 14px;
        }
    }

    // Numeric range box
    .numeric-range-box,
    .multi-range-input-row {
        display: flex;
        align-items: center;
        gap: $es-spacing-xs;
    }

    .range-min-input,
    .range-max-input {
        @include input-base;
        width: 100px;
        padding: $es-spacing-sm;
        text-align: center;
        font-size: $es-font-size-sm;

        &::-webkit-inner-spin-button,
        &::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        -moz-appearance: textfield;
    }

    .range-separator {
        color: $es-text-muted;
        font-size: $es-font-size-sm;
        font-weight: $es-font-weight-medium;
    }

    .btn-add-range {
        @include button-reset;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        color: $es-white;
        background: $es-primary;
        border-radius: $es-radius-md;
        transition: all $es-transition-fast;

        &:hover {
            background: $es-primary-hover;
        }

        i {
            font-size: 12px;
        }
    }

    // Multi-range container
    .multi-range-container {
        display: flex;
        flex-direction: column;
        gap: $es-spacing-sm;
    }

    // Date range box
    .date-range-box {
        display: flex;
        align-items: center;
        gap: $es-spacing-xs;
    }

    .date-from-input,
    .date-to-input {
        @include input-base;
        width: 140px;
        padding: $es-spacing-sm;
        font-size: $es-font-size-sm;
    }

    // Multi-select tiles
    .multi-select-tiles {
        display: flex;
        flex-wrap: wrap;
        gap: $es-spacing-xs;
    }

    .tile-option {
        @include button-reset;
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.375rem 0.75rem;
        color: $es-text-muted;
        background: transparent;
        border: 1px dashed $es-border-color;
        border-radius: 100px; // Pill shape
        font-size: $es-font-size-xs;
        font-weight: $es-font-weight-normal;
        cursor: pointer;
        transition: all $es-transition-fast;

        &:hover {
            color: $es-text-secondary;
            border-color: $es-slate-400;
            border-style: solid;
        }

        &.selected {
            color: $es-primary;
            background: $es-primary-light;
            border: 1px solid $es-primary;
            font-weight: $es-font-weight-medium;
        }

        i {
            font-size: 11px;
            opacity: 0.6;
        }

        &.selected i {
            opacity: 1;
        }
    }

    .tile-label {
        white-space: nowrap;
    }

    // Select input box
    .select-input-box {
        display: inline-block;
    }

    .select-value-input {
        @include input-base;
        padding: $es-spacing-sm $es-spacing-md;
        font-size: $es-font-size-sm;
        min-width: 150px;
    }

    // Boolean input box
    .boolean-input-box {
        display: inline-flex;
        align-items: center;
        padding: $es-spacing-sm $es-spacing-md;
        background: $es-success-light;
        color: $es-success-dark;
        border-radius: $es-radius-md;
        font-size: $es-font-size-sm;
        font-weight: $es-font-weight-medium;
    }

    .boolean-label {
        display: flex;
        align-items: center;
        gap: 0.25rem;

        &::before {
            content: '\2713';
            font-weight: bold;
        }
    }

    // Condition match count badge
    .condition-match-count {
        @include count-badge($es-primary);
        margin-left: $es-spacing-sm;
    }
}