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

@mixin kendo-switch--theme() {
    @include kendo-switch--theme-base();

    // Switch OFF
    .k-switch-off {
        .k-switch-thumb {
            box-shadow: $kendo-switch-off-thumb-shadow;
        }

        &:focus,
        &.k-focus {
            .k-switch-track {
                @include focus-indicator(
                    $type: "outline",
                    $indicator: $kendo-switch-focus-outline-color,
                    $outline-width: $kendo-switch-focus-outline-width,
                    $outline-offset: $kendo-switch-focus-outline-offset
                );
            }
        }
    }

    // Switch ON
    .k-switch-on {
        .k-switch-thumb {
            box-shadow: $kendo-switch-on-thumb-shadow;
        }

        &:focus,
        &.k-focus {
            .k-switch-track {
                @include focus-indicator(
                    $type: "outline",
                    $indicator: $kendo-switch-focus-outline-color,
                    $outline-width: $kendo-switch-focus-outline-width,
                    $outline-offset: $kendo-switch-focus-outline-offset
                );
            }
        }
    }
}