/* Switch Button */
/* Source: https://codepen.io/aanjulena/pen/ZLZjzV */
// Colors
$brand-primary: #29b5a8 !default;
$brand-secondary: #ff8300 !default;
$gray: #6b7381 !default;
$gray-light: lighten($gray, 15%) !default;
$gray-lighter: lighten($gray, 30%) !default;

// Button Colors
$btn-default-color: $gray !default;
$btn-default-bg: $gray-lighter !default;

// Toggle Sizes
$toggle-default-size: 1.5rem !default;
$toggle-default-label-width: 0.4rem !default;
$toggle-default-font-size: 0.75rem !default;

.btn-toggle {
    top: 50%;
    transform: translateY(-50%);
}

// Mixin for Switch Colors
// Variables: $color, $bg, $active-bg
@mixin toggle-color($color: $btn-default-color, $bg: $btn-default-bg, $active-bg: $brand-primary) {

    color: $color;
    background: $bg;

    &:before,
    &:after {
        color: $color;
    }

    &.active {
        background-color: $active-bg;
    }
}

// Mixin for Default Switch Styles
// Variables: $size, $margin, $color, $bg, $active-bg, $font-size
@mixin toggle-mixin($size: $toggle-default-size, $margin: $toggle-default-label-width, $font-size: $toggle-default-font-size) {

    // color: $color;
    // background: $bg;
    margin: 0 0;
    padding: 0;
    position: relative;
    border: none;
    height: $size;
    //width: $size * 2;
    width: $size * 2.30;
    border-radius: $size;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.3);

    &:focus,
    &.focus {
        &,
        &.active {
            outline: none;
        }
    }

    &:before,
    &:after {

        line-height: $size;
        width: $margin;
        text-align: center;
        font-weight: 600;
        // color: $color;
        font-size: $font-size;
        text-transform: uppercase;
        letter-spacing: 2px;
        position: absolute;
        bottom: 0;
        transition: opacity .25s;
    }

    &:before {
        content: 'Off';
        left: -$margin;
    }

    &:after {
        content: 'On';
        right: -$margin;
        opacity: .5;
    }

    > .handle {
        position: absolute;
        top: ($size * .25) / 2;
        left: ($size * .25) / 2;
        width: $size * .75;
        height: $size * .75;
        border-radius: $size * .75;
        background: #fff;
        transition: left .25s;
    }

    &.active {
        transition: background-color .25s;
        > .handle {
            //left: $size + (($size * .25) / 2);
            left: $size + (($size * .9) / 2);
            transition: left .25s;
        }

        &:before {
            opacity: .5;
        }

        &:after {
            opacity: 1;
        }
    }

    &.btn-sm {
        &:before,
        &:after {
            line-height: $size - .125rem;
            color: #fff;
            letter-spacing: 0.75px;
            //left: $size * 0.260;
            left: $size * 0.360;
            //width: $size * 1.55;
            width: $size * 1.615;
        }

        &:before {
            text-align: right;
        }

        &:after {
            text-align: left;
            opacity: 0;
        }

        &.active {
            &:before {
                opacity: 0;
            }

            &:after {
                opacity: 1;
            }
        }
    }

    &.btn-xs {
        &:before,
        &:after {
            display: none;
        }
    }
}

// Apply Mixin to different sizes & colors
/*
.btn-toggle {

    @include toggle-mixin;
    @include toggle-color;

    &.btn-lg {
        @include toggle-mixin($size: 2.5rem, $font-size: 1rem, $margin: 5rem);
    }

    &.btn-sm {
        @include toggle-mixin($font-size: .55rem, $margin: .5rem);
    }

    &.btn-xs {
        @include toggle-mixin($size:1rem, $margin:0);
    }

    &.btn-secondary {
        @include toggle-color($active-bg:$brand-secondary);
    }
}
*/