@import "../start";

.switch
{
    position:      relative;
    display:       inline-block;
    font-size:     1.6em;
    font-weight:   bold;
    color:         #ccc;
    text-shadow:   0px 1px 1px rgba(255, 255, 255, 0.8);
    height:        18px;
    padding:       6px 6px 5px 6px;
    border:        1px solid #ccc;
    border:        1px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    background:    #ececec;
    box-shadow:    0px 0px 4px rgba(0, 0, 0, 0.1), inset 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
    cursor:        pointer;

    span
    {
        display: inline-block; width: 35px;
        text-transform: uppercase;

        &.on
        {
            color: $button-primary-bkg;
        }
    }

    .toggle
    {
        position:      absolute;
        top:           1px;
        width:         37px;
        height:        25px;
        border:        1px solid #ccc;
        border:        1px solid rgba(0, 0, 0, 0.3);
        border-radius: 4px;
        background:    #fff;
        background:    -moz-linear-gradient(top, #ececec 0%, #fff 100%);
        background:    -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #fff));
        background:    -webkit-linear-gradient(top, #ececec 0%, #fff 100%);
        background:    -o-linear-gradient(top, #ececec 0%, #fff 100%);
        background:    -ms-linear-gradient(top, #ececec 0%, #fff 100%);
        background:    linear-gradient(top, #ececec 0%, #fff 100%);
        box-shadow:    inset 0px 1px 0px 0px rgba(255, 255, 255, 0.5);
        z-index:       999;
        @include transition(all 0.15s ease-in-out);
    }

    &.on .toggle
    {
        left: 2%;
    }
    &.off .toggle
    {
        left: 54%;
    }

    /* Round switch */
    &.round
    {
        padding:       0px 20px;
        border-radius: 40px;

        .toggle
        {
            border-radius: 40px;
            width:         14px;
            height:        14px;
        }

        &.on .toggle
        {
            left:       3%;
            background: $button-primary-bkg;
        }
        &.off .toggle
        {
            left: 58%;
        }
    }
}

.switch-label
{
    font-size: 20px;
    line-height: 31px;
    margin: 0 5px;
}