// ******************************************************************************
//                       QS styles declerations
// ******************************************************************************
@mixin pepperi-qs-state-default($pepperi-theme, $style, $color-name: color-qs) {
    @if ($style == 'weak') {
        @include state-weak-default($pepperi-theme, $color-name);
    } @else if ($style == 'strong') {
        @include state-strong-default($pepperi-theme, $color-name);
    } @else { // regular.
        @include state-regular-default($pepperi-theme, true, $color-name);
    }
}
@mixin pepperi-qs-state-disable($pepperi-theme, $style, $color-name: color-qs) {
    @if ($style == 'weak') {
        @include state-weak-disable($pepperi-theme, $color-name);
    } @else if ($style == 'strong') {
        @include state-strong-disable($pepperi-theme, $color-name);
    } @else { // regular.
        @include state-regular-disable($pepperi-theme, true, $color-name);
    }
}
@mixin pepperi-qs-state-hover($pepperi-theme, $style, $color-name: color-qs) {
    @if ($style == 'weak') {
        @include state-weak-hover($pepperi-theme, $color-name);
    } @else if ($style == 'strong') {
        @include state-strong-hover($pepperi-theme, $color-name);
    } @else { // regular.
        @include state-regular-hover($pepperi-theme, true, $color-name);
    }
}
@mixin pepperi-qs-state-active($pepperi-theme, $style, $color-name: color-qs) {
    @if ($style == 'weak') {
        @include state-weak-active($pepperi-theme, $color-name);
    } @else if ($style == 'strong') {
        @include state-strong-active($pepperi-theme, $color-name);
    } @else { // regular.
        @include state-regular-active($pepperi-theme, true, $color-name);
    }
}
@mixin pepperi-qs-state-focus($pepperi-theme, $style, $color-name: color-qs) {
    @if ($style == 'weak') {
        @include state-weak-focus($pepperi-theme, $color-name);
    } @else if ($style == 'strong') {
        @include state-strong-focus($pepperi-theme, $color-name);
    } @else { // regular.
        @include state-regular-focus($pepperi-theme, true, $color-name);
    }
}

@mixin pepperi-qs-state-button($pepperi-theme, $style, $color-name: color-qs) {
    @include pepperi-qs-state-default($pepperi-theme, $style, $color-name);
    &:hover {
        @include pepperi-qs-state-hover($pepperi-theme, $style, $color-name);
    }
    &:focus {
        @include pepperi-qs-state-focus($pepperi-theme, $style, $color-name);
    }
    &:active {
        @include pepperi-qs-state-active($pepperi-theme, $style, $color-name);
    }
    &:disabled {
        @include pepperi-qs-state-disable($pepperi-theme, $style, $color-name);
    }
}

@mixin pepperi-qs-action-state-button($pepperi-theme, $style, $color-name: color-qs) {
    @include pepperi-qs-state-button($pepperi-theme, $style, $color-name);

    &.qs-action {
        @include pepperi-qs-state-button($pepperi-theme, weak, $color-name);
        box-shadow: unset;
        border: unset;
        @include fix-inline-z-index();
    }
}

@mixin pepperi-qs-states($pepperi-theme, $style) {
    .mat-form-field {
        .mat-form-field-flex {
            @include pepperi-qs-state-default($pepperi-theme, $style);
        }

        &:hover .mat-form-field-flex {
            @include pepperi-qs-state-hover($pepperi-theme, $style);
        }

        // Focused
        &.mat-focused .mat-form-field-flex {
            @include pepperi-qs-state-focus($pepperi-theme, $style);
        }
        
        // Active
        &:active .mat-form-field-flex {
            @include pepperi-qs-state-active($pepperi-theme, $style);
        }

        // Disabled
        &.mat-form-field-disabled .mat-form-field-flex {
            @include pepperi-qs-state-disable($pepperi-theme, $style);
        }
    }

    // .pepperi-button:not(.qs-action) {
    .pepperi-button {
        @include pepperi-qs-action-state-button($pepperi-theme, $style);
    }

    &.caution {
        .mat-form-field {
            .mat-form-field-flex {
                @include pepperi-qs-state-default($pepperi-theme, $style, color-system-caution);
            }

            &:hover .mat-form-field-flex {
                @include pepperi-qs-state-hover($pepperi-theme, $style, color-system-caution);
            }

            // Focused
            &.mat-focused .mat-form-field-flex {
                @include pepperi-qs-state-focus($pepperi-theme, $style, color-system-caution);
            }

            // Active
            &:active .mat-form-field-flex {
                @include pepperi-qs-state-active($pepperi-theme, $style, color-system-caution);
            }

            // Disabled
            &.mat-form-field-disabled .mat-form-field-flex {
                @include pepperi-qs-state-disable($pepperi-theme, $style, color-system-caution);
            }
        }

        // .pepperi-button:not(.qs-action) {
        .pepperi-button {
            @include pepperi-qs-action-state-button($pepperi-theme, $style, color-system-caution);
        }
    }
}

@mixin pepperi-quantity-selector-component-theme($pepperi-theme) {
    .pepperi-quantity-selector-container {
        &:not(.strong) {
            .mat-form-field {
                .mat-input-element {
                    color: get-pepperi-color($pepperi-theme, color-text, color-main);
                }
            }
        
            &.zero-quantity {
                .mat-form-field {
                    .mat-input-element {
                        color: get-pepperi-color($pepperi-theme, color-text, color-dimmed);
                    }
                }

                button {
                    color: get-pepperi-color($pepperi-theme, color-text, color-dimmed);
                }
            }
        }

        &.weak {
            @include pepperi-qs-states($pepperi-theme, weak);
        }

        &.regular {
            @include pepperi-qs-states($pepperi-theme, regular);    
        }

        &.strong {
            @include pepperi-qs-states($pepperi-theme, strong);
        }
        
        &.matrix-qs {
            .additional-value {
                @include pepperi-badge($pepperi-theme);
            }
        }

    }
}