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

@import "../common";

@include export("switch") {
    #{$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;
        text-align: left;

        &::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;
                }
            }
        }
    }
}