@use "./_variables.scss" as *;
@use "../core/_index.scss" as *;
@use "@progress/kendo-theme-core/scss/components/radio/_theme.scss" as *;


@mixin kendo-radio--theme() {

    @include kendo-radio--theme-base();

    .k-radio {
        &:hover,
        &.k-hover {
            &::after {
                opacity: .08;
                background-color: k-color(on-app-surface);
            }

            &:checked,
            &.k-checked {
                &::after {
                    background-color: k-color(primary);
                }
            }

            &.k-invalid::after {
                background-color: k-color(error);
            }
        }

        &:focus,
        &.k-focus {
            &::after {
                opacity: .12;
                background-color: k-color(on-app-surface);
            }

            &:checked,
            &.k-checked {
                &::after {
                    background-color: k-color(primary);
                }
            }

            &.k-invalid::after {
                background-color: k-color(error);
            }
        }

    }

    .k-ripple-focus.k-radio {

        &:hover,
        &.k-hover,
        &:focus,
        &.k-focus {
            &::after,
            &:checked::after,
            &.k-checked::after,
            &.k-invalid::after {
                background: $kendo-radio-ripple-bg;
                opacity: $kendo-radio-ripple-opacity;
            }
        }

        /* Radio Ripple animation */

        &::after {
            animation: ripple-radio k-transition(fade-out);
        }

        &:checked,
        &.k-checked {
            &::after {
                animation: ripple-radio-checked k-transition(fade-out);
            }
        }


        @keyframes ripple-radio {
            0% {
                background: radial-gradient(circle, $kendo-radio-ripple-bg 0%, k-color(primary) 50%);
                opacity: 0.08;
            }
            50% {
                background: radial-gradient(circle, $kendo-radio-ripple-bg 50%, k-color(primary) 100%);
                opacity: $kendo-radio-ripple-opacity;
            }
            100% {
                background: radial-gradient(circle, k-color(primary) 0%, k-color(primary) 100%);
                opacity: .12;
            }
        }

        @keyframes ripple-radio-checked {
            0% {
                background: radial-gradient(circle, $kendo-radio-ripple-bg 0%, k-color(on-app-surface) 50%);
                opacity: 0.08;
            }
            50% {
                background: radial-gradient(circle, $kendo-radio-ripple-bg 50%, k-color(on-app-surface) 100%);
                opacity: $kendo-radio-ripple-opacity;
            }
            100% {
                background: radial-gradient(circle, k-color(on-app-surface) 0%, k-color(on-app-surface) 100%);
                opacity: .12;
            }
        }
    }

    // Radio
    // Disabled state
    .k-radio {
        &:disabled,
        &.k-disabled {
            &.k-invalid {
                border-color: $kendo-radio-disabled-border;
            }
        }
    }

}