@import '../base/states';
@import './layout';

$switch-on-color: $accent !default;
$switch-off-color: darken($base, 44%) !default;
$switch-background: $normal-background !default;
$switch-border-color: rgba(0, 0, 0, .08) !default;
$switch-border-radius: ($switch-size / 2) !default;
$switch-box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .06) !default;
$switch-handle-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .06) !default;
$switch-handle-gradient: darken($background, 4%), darken($background, 5%) !default;
$switch-hover-border-color: rgba(0, 0, 0, .15) !default;
$switch-hover-on-handle-gradient: adjust-hue($accent, 7), adjust-hue($accent, 4) !default;
$switch-hover-on-handle-border-color: adjust-hue($accent, 3) !default;
$switch-hover-off-handle-gradient: darken($background, 7%), darken($background, 9%) !default;
$switch-focus-box-shadow: 0 0 0 2px rgba(0, 0, 0, .06) !default;

@include exports('switch/theme') {
    .k-switch,
    .k-switch-wrapper,
    .k-switch-container {
        border-radius: $switch-border-radius;
        outline: 0;
    }

    .k-switch-container,
    .k-switch-wrapper {
        border-color: $switch-border-color;

        &:hover {
            border-color: $switch-hover-border-color;
        }
    }

    .k-switch-container {
        box-shadow: $switch-box-shadow;
    }

    .k-switch-wrapper {
        background-color: $switch-background;
    }

    .k-switch-background {
        background-position: 4.3em 0;
        background-repeat: no-repeat;
    }

    .k-switch-handle {
        background-color: $switch-background;
        background-image: linear-gradient($switch-handle-gradient);
        border-color: $switch-border-color;
        box-shadow: $switch-handle-box-shadow;
        border-radius: 50%;
    }

    .k-switch-on,
    .k-switch-off {
        color: $switch-background;
    }

    .k-switch-on {
        .k-switch-handle {
            background: $accent;
            border-color: $accent;
        }

        &:hover {
            .k-switch-handle {
                background-color: $accent;
                background-image: linear-gradient($switch-hover-on-handle-gradient);
                border-color: $switch-hover-on-handle-border-color;
            }
        }
    }

    .k-switch-off {
        &:hover {
            .k-switch-handle {
                background-image: linear-gradient($switch-hover-off-handle-gradient);
                border-color: $switch-hover-border-color;
            }
        }

        &:focus {
            .k-switch-handle {
                background-image: linear-gradient($switch-handle-gradient);
            }
        }
    }

    .k-switch-label-on {
        color: $switch-on-color;
        background-color: transparent;
    }

    .k-switch-label-off {
        color: $switch-off-color;
    }

    .k-switch {
        &:focus {
            box-shadow: $switch-focus-box-shadow;
            outline: none;

            .k-switch-container,
            .k-switch-wrapper {
                border-color: $switch-hover-border-color;
            }
        }

        &.k-state-disabled {
            cursor: auto;

            .k-switch-container,
            .k-switch-wrapper {
                border-color: $switch-border-color;
                box-shadow: none;
            }

            &:focus {
                box-shadow: none;
            }

            .k-switch-handle {
                background-image: linear-gradient($switch-handle-gradient);
                border-color: $switch-border-color;
            }

            &.k-switch-on {
                .k-switch-handle {
                    background: $accent;
                    border-color: $accent;
                    opacity: .5;
                }
            }
        }
    }
}