@use '../variables' as *;

.proddisp-style-controls {
    .style-section {
        margin-bottom: $spacing-xl;
        padding-bottom: $spacing-lg;
        border-bottom: 1px solid #e6e6e6;

        &:last-child {
            border-bottom: none;
            margin-bottom: 0;
        }

        h3 {
            font-size: 16px;
            font-weight: 600;
            color: $text-color;
            margin-bottom: $spacing-md;
            padding-bottom: $spacing-xs;
            border-bottom: 1px solid #eeeeee;
        }
    }

    .color-picker-container {
        display: flex;
        gap: $spacing-sm;
        align-items: center;

        .color-picker {
            width: 40px;
            height: 32px;
            padding: 0;
            border: 1px solid $border-color;
            border-radius: $border-radius;
            cursor: pointer;
            transition: all 0.2s ease;

            &:hover {
                border-color: #2271b1;
                box-shadow: 0 0 0 1px #2271b1;
            }

            &:focus {
                outline: none;
                border-color: #2271b1;
                box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.2);
            }

            &::-webkit-color-swatch-wrapper {
                padding: 0;
                border-radius: calc(#{$border-radius} - 1px);
            }

            &::-webkit-color-swatch {
                border: none;
                border-radius: calc(#{$border-radius} - 1px);
            }

            &::-moz-color-swatch {
                border: none;
                border-radius: calc(#{$border-radius} - 1px);
            }
        }

        .color-input {
            flex: 1;
            font-family: monospace;
            font-size: 12px;
            transition: all 0.2s ease;

            &:focus {
                border-color: #2271b1;
                box-shadow: 0 0 0 1px #2271b1;
            }
        }
    }

    .range-control {
        display: flex;
        gap: $spacing-sm;
        align-items: center;

        .range-slider {
            flex: 1;
            height: 6px;
            border-radius: 3px;
            background: $background-light;
            outline: none;
            transition: all 0.1s ease;
            cursor: pointer;

            &:hover {
                background: #ddd;
                height: 8px;
                margin: -1px 0;
            }

            &:focus {
                background: #ddd;
                box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.2);
            }

            &::-webkit-slider-thumb {
                appearance: none;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background: linear-gradient(135deg, #2271b1, #1e5a8a);
                cursor: grab;
                border: 3px solid $white;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
                transition: all 0.1s ease;

                &:hover {
                    background: linear-gradient(135deg, #1e5a8a, #135e96);
                    transform: scale(1.1);
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
                }

                &:active {
                    cursor: grabbing;
                    transform: scale(1.15);
                    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
                }
            }

            &::-moz-range-thumb {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background: linear-gradient(135deg, #2271b1, #1e5a8a);
                cursor: grab;
                border: 3px solid $white;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
                transition: all 0.1s ease;

                &:hover {
                    background: linear-gradient(135deg, #1e5a8a, #135e96);
                    transform: scale(1.1);
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
                }

                &:active {
                    cursor: grabbing;
                    transform: scale(1.15);
                    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
                }
            }
        }

        .range-value {
            display: flex;
            align-items: center;
            gap: 4px;
            min-width: 70px;

            input {
                width: 55px;
                padding: 6px 8px;
                font-size: 12px;
                text-align: center;
                transition: all 0.15s ease;
                border-radius: $border-radius;
                border: 1px solid $border-color;
                background: $white;

                &:focus {
                    border-color: #2271b1;
                    box-shadow: 0 0 0 1px #2271b1;
                    transform: translateY(-1px);
                    background: #f8f9fa;
                }

                &:hover {
                    border-color: #8c8f94;
                    background: #f8f9fa;
                }
            }

            span {
                font-size: 11px;
                color: $text-light;
            }
        }
    }

    .alignment-control {
        display: flex;
        gap: 2px;
        border: 1px solid $border-color;
        border-radius: $border-radius;
        overflow: hidden;

        .alignment-btn {
            flex: 1;
            padding: 8px 12px;
            border: none;
            background: $white;
            color: $text-light;
            cursor: pointer;
            transition: all 0.15s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;

            &:hover {
                background: #f0f0f1;
                color: $text-color;
                transform: translateY(-1px);
            }

            &.active {
                background: #2271b1;
                color: $white;
                box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);

                &:hover {
                    background: #1e5a8a;
                    transform: none;
                }
            }

            &:focus {
                outline: none;
                box-shadow: 0 0 0 1px #2271b1;
                z-index: 1;
                position: relative;
            }

            i {
                pointer-events: none;
            }
        }
    }

    .setting-group {
        margin-bottom: $spacing-md;
        transition: all 0.15s ease;

        &:last-child {
            margin-bottom: 0;
        }

        &:hover {
            transform: translateX(2px);
        }

        label {
            font-size: 13px;
            font-weight: 500;
            color: $text-color;
            margin-bottom: $spacing-xs;
            display: block;
            transition: color 0.15s ease;
        }

        // Add active state for when controls are being used
        &:focus-within {
            label {
                color: #2271b1;
            }
        }

        // Smooth select styling
        select {
            transition: all 0.15s ease;

            &:hover {
                border-color: #8c8f94;
                transform: translateY(-1px);
            }

            &:focus {
                border-color: #2271b1;
                box-shadow: 0 0 0 1px #2271b1;
                transform: translateY(-1px);
            }
        }
    }

    // Add smooth loading state
    .style-section {
        &.loading {
            opacity: 0.7;
            pointer-events: none;

            * {
                transition: none !important;
            }
        }
    }

    // Add visual feedback for real-time updates
    .setting-group {
        &.updating {

            .color-picker,
            .range-slider {
                box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.3);
            }
        }
    }
}
//
 Enhanced Icon Picker Styles
.icon-picker-container {
    position: relative;
    margin-bottom: $spacing-md;

    .icon-picker-label {
        display: block;
        font-weight: 500;
        color: $text-color;
        margin-bottom: $spacing-xs;
        font-size: 14px;
    }

    .icon-picker-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: $spacing-sm;
        border: 1px solid $border-color;
        border-radius: $border-radius;
        background: white;
        cursor: pointer;
        transition: all 0.2s ease;
        min-height: 40px;

        &:hover {
            border-color: #2271b1;
            box-shadow: 0 0 0 1px #2271b1;
        }

        &:focus-within {
            border-color: #2271b1;
            box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.2);
        }

        .selected-icon {
            display: flex;
            align-items: center;
            gap: $spacing-xs;

            .icon-display {
                font-size: 16px;
                color: $text-color;
                width: 20px;
                text-align: center;
            }

            .icon-placeholder {
                color: #999;
                font-style: italic;
            }
        }

        .dropdown-arrow {
            color: #666;
            font-size: 12px;
            transition: transform 0.2s ease;
        }
    }

    .icon-picker-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        border: 1px solid $border-color;
        border-radius: $border-radius;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        z-index: 1000;
        max-height: 400px;
        overflow-y: auto;

        .icon-search {
            padding: $spacing-sm;
            border-bottom: 1px solid #eee;
            position: sticky;
            top: 0;
            background: white;
            z-index: 1001;

            .icon-search-input {
                width: 100%;
                padding: $spacing-xs $spacing-sm;
                border: 1px solid $border-color;
                border-radius: $border-radius;
                font-size: 14px;
                outline: none;

                &:focus {
                    border-color: #2271b1;
                    box-shadow: 0 0 0 1px #2271b1;
                }

                &::placeholder {
                    color: #999;
                }
            }
        }

        .icon-categories {
            padding: $spacing-sm;
        }

        .icon-category {
            margin-bottom: $spacing-lg;

            &.popular-icons {
                .category-title {
                    color: #d63384;
                    border-color: #d63384;

                    i {
                        color: #d63384;
                    }
                }

                .icon-grid {
                    border: 1px solid #d63384;
                    border-radius: $border-radius;
                    padding: $spacing-sm;
                    background: rgba(214, 51, 132, 0.05);
                }
            }

            &.contextual-category {
                .category-title {
                    color: #0d6efd;
                    border-color: #0d6efd;

                    i {
                        color: #0d6efd;
                    }

                    .contextual-badge {
                        background: #0d6efd;
                        color: white;
                        font-size: 10px;
                        padding: 2px 6px;
                        border-radius: 10px;
                        margin-left: $spacing-xs;
                        font-weight: 500;
                    }
                }

                .icon-grid {
                    border: 1px solid #0d6efd;
                    border-radius: $border-radius;
                    padding: $spacing-sm;
                    background: rgba(13, 110, 253, 0.05);
                }
            }

            .category-title {
                font-size: 13px;
                font-weight: 600;
                color: $text-color;
                margin-bottom: $spacing-sm;
                padding-bottom: $spacing-xs;
                border-bottom: 1px solid #eee;
                display: flex;
                align-items: center;
                gap: $spacing-xs;

                i {
                    font-size: 12px;
                }
            }

            .icon-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
                gap: $spacing-xs;
                padding: $spacing-xs;
                background: #f8f9fa;
                border-radius: $border-radius;

                .icon-option {
                    width: 40px;
                    height: 40px;
                    border: 1px solid transparent;
                    background: white;
                    border-radius: $border-radius;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    transition: all 0.2s ease;
                    position: relative;

                    &:hover {
                        border-color: #2271b1;
                        background: #f0f6fc;
                        transform: translateY(-1px);
                        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                    }

                    &.selected {
                        border-color: #2271b1;
                        background: #2271b1;
                        color: white;

                        &::after {
                            content: '✓';
                            position: absolute;
                            top: -2px;
                            right: -2px;
                            background: #00a32a;
                            color: white;
                            font-size: 8px;
                            width: 14px;
                            height: 14px;
                            border-radius: 50%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-weight: bold;
                        }
                    }

                    i {
                        font-size: 16px;
                        transition: all 0.2s ease;
                    }
                }
            }
        }

        .no-icons-found {
            padding: $spacing-lg;
            text-align: center;
            color: #666;

            p {
                margin-bottom: $spacing-xs;
                font-weight: 500;
            }

            small {
                color: #999;
                font-size: 12px;
            }
        }

        .loading-icons {
            padding: $spacing-lg;
            text-align: center;
            color: #666;

            p {
                margin: 0;
                font-style: italic;
            }
        }
    }

    // Responsive adjustments
    @media (max-width: 768px) {
        .icon-picker-dropdown {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 90vw;
            max-width: 400px;
            max-height: 70vh;

            .icon-categories .icon-category .icon-grid {
                grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));

                .icon-option {
                    width: 35px;
                    height: 35px;

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

// Icon picker overlay for mobile
.icon-picker-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none;

    @media (max-width: 768px) {
        display: block;
    }
}