@import '../abstracts/mixins';

// -----------------------------------------------------
//  Override material style
// -----------------------------------------------------
.pepperi-radio-button {
    &.mat-radio-button {
        .mat-radio-container,
        .mat-radio-outer-circle,
        .mat-radio-inner-circle {
            width: 1.5rem;
            height: 1.5rem;
        }

        .mat-radio-label {
            margin: 0;
        }

        &.mat-radio-checked {
            .mat-radio-inner-circle {
                transform: scale(0.45);
            }
        }
    }
}

@mixin pepperi-radio-button-theme($pepperi-theme) {
    .pepperi-radio-button {
        &.mat-radio-button {
            .mat-radio-inner-circle,
            .mat-radio-outer-circle {
                @include state-regular-default($pepperi-theme, true);
            }

            &:hover {
                .mat-radio-inner-circle,
                .mat-radio-outer-circle {
                    @include state-regular-hover($pepperi-theme, true);
                }
            }

            &:active {
                .mat-radio-inner-circle,
                .mat-radio-outer-circle {
                    @include state-regular-active($pepperi-theme, true);
                }
            }

            // checked
            &.mat-radio-checked {
                .mat-radio-inner-circle {
                    border: unset;
                    background: get-pepperi-color($pepperi-theme, color-system-primary, color-flat-l-10);
                }

                .mat-radio-outer-circle {
                    @include state-regular-active($pepperi-theme, true);
                    background: get-pepperi-color($pepperi-theme, color-system-primary, color-flat-r-30);
                }

                &:hover {
                    .mat-radio-outer-circle {
                        @include state-regular-hover($pepperi-theme, true);
                    }

                    .mat-radio-inner-circle {
                        background: get-pepperi-color($pepperi-theme, color-text, color-dimmed);
                    }
                }
            }

            // focused
            &.cdk-focused {
                &:hover {
                    .mat-radio-outer-circle {
                        @include state-regular-hover($pepperi-theme, true);
                        // @include focus($pepperi-theme);
                    }

                    .mat-radio-inner-circle {
                        background: get-pepperi-color($pepperi-theme, color-text, color-dimmed);
                    }
                }

                &:active {
                    .mat-radio-outer-circle {
                        @include state-regular-active($pepperi-theme, true);
                        // @include focus($pepperi-theme);
                    }
                }

                .mat-radio-outer-circle {
                    @include state-regular-focus($pepperi-theme, true);
                }
            }

            // disabled
            &.mat-radio-disabled {
                pointer-events: none;

                .mat-radio-inner-circle {
                    background: get-pepperi-color($pepperi-theme, color-text, color-disabled);
                }

                .mat-radio-outer-circle {
                    @include state-regular-disable($pepperi-theme, true);
                }
            }
        }
    }
}