/**
 * @copyright   2010-2015, The Titon Project
 * @license     http://opensource.org/licenses/BSD-3-Clause
 * @link        http://titon.io
 */

@import "../common";

#{$switch-class} {
    @include reset-inline-block;
    font-size: 0;
    width: 100px;
    cursor: pointer;

    &.is-disabled {
        opacity: $disabled-opacity;
    }

    input {
        display: none;

        &:checked + #{$switch-class-bar} {
            #{$switch-class-toggle} {
                left: 50%;
            }

            &::before { opacity: 1; }
            &::after { opacity: 0; }
        }
    }

    @include is-small() {
        width: 70px;

        #{$switch-class-bar} {
            font-size: $small-size;

            &::before,
            &::after {
                padding: $small-padding;
            }
        }

        #{$switch-class-toggle} {
            padding: $small-padding;
        }
    }

    @include is-large() {
        width: 130px;

        #{$switch-class-bar} {
            font-size: $large-size;

            &::before,
            &::after {
                padding: $large-padding;
            }
        }

        #{$switch-class-toggle} {
            padding: $large-padding;
        }
    }
}

#{$switch-class-bar} {
    display: block;
    position: relative;
    font-size: $medium-size;
    transition: background $switch-transition;

    &::before,
    &::after {
        position: absolute;
        padding: $medium-padding;
        top: 0;
        opacity: 1;
        z-index: 1;
        transition: opacity $switch-transition;
    }

    &::before {
        left: 0;
        opacity: 0;
        content: attr(data-switch-on);
    }

    &::after {
        right: 0;
        content: attr(data-switch-off);
    }

    //----- Effects -----//

    &#{$shape-round-class} {
        #{$switch-class-toggle} {
            border-radius: $round - 0.02;
        }
    }

    @if index($switch-effects, "pill") {
        &#{$shape-pill-class} {
            border-radius: $pill;

            #{$switch-class-toggle} {
                border-radius: $pill;
            }
        }
    }
}

#{$switch-class-toggle} {
    @include reset-inline-block;
    padding: $medium-padding;
    width: 50%;
    z-index: 2;
    left: 0;
    user-select: none;
    transition: left $switch-transition;

    &::before { content: "\00A0"; } // NBSP
}

//-------------------- Modifiers --------------------//

@if index($switch-modifiers, "stacked") {
    #{$switch-class-modifier-stacked} {
        #{$switch-class-bar} {
            &::before,
            &::after {
                z-index: 3;
                opacity: 1 !important;
            }
        }
    }
}