@use '../src/core/style/abstracts/variables';
@use '../src/core/style/abstracts/mixins';
@use '../src/core/style/abstracts/functions';

@mixin pep-qs-action-state-button($style, $color-name: color-qs) {
    @include mixins.pep-button-states($style, $color-name);

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

@mixin pep-qs-states($style) {
    .mat-form-field {
        @include mixins.pep-form-field-states($style, color-qs);
    }

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

    &.caution {
        .mat-form-field {
            @include mixins.pep-form-field-states($style, color-system-caution);
        }

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

::ng-deep {
    .pepperi-quantity-selector-container, .pep-quantity-selector-container {
        &:not(.strong) {
            .mat-form-field {
                .mat-input-element {
                    color: functions.get-pep-color(color-text, color-main);
                }
            }

            &.zero-quantity {
                .mat-form-field {
                    .mat-input-element {
                        color: functions.get-pep-color(color-text, color-dimmed);
                    }
                }

                button {
                    color: functions.get-pep-color(color-text, color-dimmed);
                }
            }
        }

        &.weak {
            @include pep-qs-states(weak);
        }

        &.regular {
            @include pep-qs-states(regular);
        }

        &.strong {
            @include pep-qs-states(strong);
        }

        &.matrix-qs {
            .additional-value {
                @include mixins.pep-badge();
            }
        }
    }
}