/**
 * Combination Attributes Picker Component
 * Product attribute combination selection styles
 */

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

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

    // Main container
    .combination-attributes-picker {
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
    }

    // Mode toggle (Any/All)
    .combination-mode-toggle {
        display: inline-flex;
        gap: 0.25rem;
        padding: 0.125rem;
        background: $es-slate-100;
        border-radius: $es-radius-md;
        margin-bottom: 0.5rem;
    }

    .combination-mode-option {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        cursor: pointer;
        font-size: 11px;
        color: $es-text-muted;
        padding: 0.25rem 0.625rem;
        border-radius: $es-radius-sm;
        transition: all $es-transition-fast;

        input[type="radio"] {
            display: none;
        }

        .mode-label {
            user-select: none;
        }

        &:hover {
            color: $es-primary;
            background: rgba($es-primary, 0.1);
        }

        &:has(input[type="radio"]:checked) {
            background: $es-primary;
            color: $es-white;
            font-weight: $es-font-weight-medium;
        }
    }

    // Groups container
    .combination-groups-container {
        display: flex;
        flex-wrap: wrap;
        gap: $es-spacing-md;
    }

    // Loading/Empty/Error states
    .combination-loading,
    .combination-empty,
    .combination-error {
        color: $es-text-muted;
        font-style: italic;
        padding: 0.5rem;
    }

    .combination-error {
        color: $es-danger;
    }

    // Section header
    .combinations-section {
        margin-bottom: $es-spacing-md;
    }

    .combinations-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: $es-spacing-sm;
    }

    .combinations-label {
        font-size: $es-font-size-xs;
        font-weight: $es-font-weight-medium;
        color: $es-text-muted;
    }

    .combinations-help {
        font-size: 11px;
        color: $es-slate-400;
    }

    // Toggle combinations button
    .btn-toggle-combinations {
        @include button-reset;
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.25rem 0.5rem;
        font-size: $es-font-size-xs;
        color: $es-primary;
        background: transparent;
        border: 1px solid $es-primary;
        border-radius: $es-radius-sm;
        transition: all $es-transition-fast;

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

    .btn-remove-combinations {
        @include button-reset;
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.25rem 0.5rem;
        font-size: $es-font-size-xs;
        color: $es-danger;
        background: transparent;

        &:hover {
            text-decoration: underline;
        }
    }

    // =============================================================================
    // Attribute Group
    // =============================================================================

    .comb-attr-group {
        flex: none;
        min-width: 120px;
        max-width: 200px;
        background: $es-white;
        border: 1px solid $es-gray-300;
        border-radius: $es-radius-sm;
        overflow: hidden;

        &.has-selections {
            border-color: $es-primary;
        }
    }

    .comb-attr-group-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.375rem 0.625rem;
        background: $es-slate-100;
        border-bottom: 1px solid $es-gray-300;
        font-weight: $es-font-weight-semibold;
        font-size: $es-font-size-xs;
        color: $es-slate-800;

        .comb-attr-group.has-selections & {
            background: $es-cyan-50;
            border-bottom-color: $es-cyan-200;
        }
    }

    .comb-attr-group-name {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .comb-attr-group-count {
        flex-shrink: 0;
        min-width: 18px;
        height: 18px;
        padding: 0 0.25rem;
        background: $es-gray-300;
        border-radius: $es-radius-full;
        font-size: 11px;
        font-weight: $es-font-weight-semibold;
        line-height: 18px;
        text-align: center;
        color: $es-text-muted;

        .comb-attr-group.has-selections & {
            background: $es-primary;
            color: $es-white;
        }
    }

    // Toolbar
    .comb-attr-toolbar {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.25rem 0.375rem;
        background: $es-slate-50;
        border-bottom: 1px solid $es-slate-100;
    }

    .comb-toolbar-btn {
        @include button-reset;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        padding: 0;
        background: $es-white;
        border: 1px solid $es-gray-300;
        border-radius: $es-radius-sm;
        color: $es-text-muted;
        cursor: pointer;
        font-size: $es-font-size-xs;
        transition: all $es-transition-fast;

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

    .comb-attr-search {
        flex: 1;
        min-width: 60px;
        padding: 0.125rem 0.375rem;
        border: 1px solid $es-gray-300;
        border-radius: $es-radius-sm;
        font-size: 11px;
        outline: none;

        &:focus {
            border-color: $es-primary;
        }

        &::placeholder {
            color: $es-slate-400;
        }
    }

    // Values container
    .comb-attr-values {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
        padding: 0.375rem;
        max-height: 150px;
        overflow-y: auto;
        @include custom-scrollbar;
    }

    .comb-attr-loading,
    .comb-attr-empty,
    .comb-attr-error {
        width: 100%;
        text-align: center;
        color: $es-slate-400;
        font-size: 11px;
        padding: 0.25rem;
    }

    .comb-attr-error {
        color: $es-danger;
    }

    // Individual value
    .comb-attr-value {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.125rem 0.5rem;
        background: $es-white;
        border: 1px solid $es-slate-400;
        border-radius: 0.75rem;
        font-size: 11px;
        color: $es-slate-600;
        cursor: pointer;
        transition: all $es-transition-fast;
        white-space: nowrap;

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

        &.selected {
            background: $es-primary;
            border-color: $es-primary-hover;
            color: $es-white;

            &:hover {
                background: $es-primary-hover;
                border-color: darken($es-primary-hover, 5%);
            }
        }
    }

    .comb-attr-value-count {
        font-size: 9px;
        color: $es-slate-400;
        background: $es-slate-100;
        padding: 1px 0.25rem;
        border-radius: 0.5rem;
        min-width: 14px;
        text-align: center;

        .comb-attr-value.selected & {
            color: $es-white;
            background: rgba(255, 255, 255, 0.3);
        }
    }

    // =============================================================================
    // Combination Conditions (Row-based)
    // =============================================================================

    .combination-conditions-container {
        display: flex;
        flex-direction: column;
        gap: $es-spacing-sm;
    }

    .combination-condition-row {
        display: flex;
        align-items: center;
        gap: $es-spacing-sm;
        padding: $es-spacing-sm;
        background: $es-slate-50;
        border-radius: $es-radius-sm;
    }

    .combination-group-select,
    .combination-values-select {
        flex: 1;
        min-width: 120px;
    }

    .combination-equals {
        font-size: $es-font-size-xs;
        color: $es-text-muted;
        padding: 0 0.25rem;
    }

    .btn-add-combination-condition {
        @include button-reset;
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.375rem 0.75rem;
        font-size: $es-font-size-xs;
        font-weight: $es-font-weight-medium;
        color: $es-primary;
        background: transparent;
        border: 1px dashed $es-primary;
        border-radius: $es-radius-sm;
        transition: all $es-transition-fast;

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

        i {
            font-size: 10px;
        }
    }

    .btn-remove-combination-row {
        @include button-reset;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        color: $es-text-muted;
        border-radius: $es-radius-sm;
        transition: all $es-transition-fast;

        &:hover {
            background: rgba($es-danger, 0.1);
            color: $es-danger;
        }

        i {
            font-size: 12px;
        }
    }
}