// iOS-style toggle rendered from a checkbox

/*
 * 1. Fix vertical position
 */
.lp_toggle {
    display: inline-block;
    margin: 0 0.25em -1.25em; /* 1 */
    position: relative;
    top: -0.9em; /* 1 */
    vertical-align: middle;

    form {
        margin: 0;
    }
}

// frame
.lp_toggle__label {
    @include linear-gradient($background, 0%, $background--lightest, 100%, $start, $end);
    border-radius: 1em;
    box-shadow: inset 0 -1px $background--lightest, inset 0 1px 1px hsla(0, 0%, 0%, 0.05);
    box-sizing: content-box;
    cursor: pointer;
    display: inline-block;
    height: 1.75em;
    margin: 0.25em 0.25em 0;
    padding: 0.25em;
    position: relative;
    vertical-align: top;
    width: 5em;
}



// toggle knob
.lp_toggle__handle {
    border-radius: 1em;
    box-shadow: 1px 1px 5px hsla(0, 0%, 0%, 0.2);
    height: 1.55em;
    left: 0.35em;
    @include linear-gradient($background--lightest, 40%, $background, 100%, $start, $end);
    position: absolute;
    top: 0.35em;
    transition: left 0.15s ease-out;
    width: 1.55em;

    &:before {
        border-radius: 50%;
        box-shadow: inset 0 1px hsla(0, 0%, 0%, 0.02);
        content: '';
        height: 1.1em;
        left: 50%;
        @include linear-gradient($background, 0%, $background--darker, 100%, $start, $end);
        margin: -0.55em 0 0 -0.55em;
        position: absolute;
        top: 50%;
        width: 1.1em;
    }
}

.lp_toggle__input {
    left: 0;
    @include opacity(0);
    position: absolute !important;
    top: 0;

    /*
     * Also hide the input in case it is disabled
     * 1. set opacity without the polyfill, so !important can be applied to it
     */
    &:disabled {
        opacity: 0 !important;
        filter: unquote('progid:DXImageTransform.Microsoft.Alpha(Opacity=' + 0 + ')') !important;
    }

    &:checked ~ .lp_toggle__text {
        background-color: $laterpay-brand--darker;
        box-shadow: inset 0 1px 2px hsla(0, 0%, 0%, 0.15), inset 0 0 3px hsla(0, 0%, 0%, 0.2);

        &:before {
            @include opacity(0);
        }

        &:after {
            @include opacity(1);
        }
    }

    &:checked ~ .lp_toggle__handle {
        box-shadow: -1px 1px 5px hsla(0, 0%, 0%, 0.2);
        left: auto;
        right: 0.4em;
    }
}


// text within toggle
.lp_toggle__text {
    background: $border--darker;
    border-radius: inherit;
    box-shadow: inset 0 1px 2px hsla(0, 0%, 0%, 0.12), inset 0 0 2px hsla(0, 0%, 0%, 0.15);
    display: block;
    font-size: 10px;
    height: 100%;
    position: relative;
    text-transform: uppercase;
    transition-property: opacity background;
    transition: 0.15s ease-out;

    &:before,
    &:after {
        color: $text--inverse;
        font-size: 1.25em;
        font-weight: 600;
        line-height: 1;
        margin-top: -0.5em;
        position: absolute;
        top: 50%;
        transition: inherit;
    }

    // 'off'-text
    &:before {
        content: attr(data-off);
        right: 0.75em;
    }

    // 'on'-text
    &:after {
        content: attr(data-on);
        left: 0.75em;
        @include opacity(0);
    }
}