@use "sass:map";
@use "./variables.scss" as *;
@use "../core/functions/index.scss" as *;
@use "../core/z-index/index.scss" as *;
@use "@progress/kendo-theme-core/scss/components/switch/_layout.scss" as *;

@mixin kendo-switch--layout() {

    @include kendo-switch--layout-base();

    // Switch
    .k-switch {

        // Thumb ripple
        .k-switch-thumb::before {
            content: "";
            border-radius: 100%;
            display: none;
            opacity: 0;
            transform: translate( -50%, -50% );
            position: absolute;
            z-index: k-z-index("bottom");
            top: 50%;
            left: 50%;
            pointer-events: none;
        }

        // Hover
        &:hover,
        &.k-hover {
            .k-switch-thumb::before {
                display: block;
                opacity: .08;
            }
        }

        // Focus
        &:focus,
        &.k-focus {
            .k-switch-thumb::before {
                display: block;
                opacity: .2;
            }
        }

        &:disabled,
        &.k-disabled {
            opacity: 1;
        }

        // Switch sizes
        @each $size, $size-props in $kendo-switch-sizes {

            $_thumb-indicator-size: map.get( $size-props, thumb-indicator-size );

            #{k-when-default($kendo-switch-default-size, $size)}
            &.k-switch-#{$size} {
                .k-switch-thumb::before {
                    width: $_thumb-indicator-size;
                    height: $_thumb-indicator-size;
                }
            }
        }
    }
}