/*
Switches

Switches, previously known as "toggle sliders," are used to show if a given feature or item is turned on
or off. The toggle should contain a label. If you require a status, the ON/OFF toggle can be used.

Markup:
<h3>Switch with visible label</h3>
<div class="switch">
    <label for="defaultSwitch" class="switch__label">Automatic late fees</label>
    <input role="switch" type="checkbox" class="switch__input" id="defaultSwitch" />
</div>
<h3>Switch with hidden label</h3>
<div class="switch">
    <input role="switch" id="noLabelSwitch" type="checkbox" class="switch__input" aria-label="Automatic late fees" />
</div>
<h3>On/Off Switch</h3>
<div>
    <label for="onOffSwitch" class="switch__label">Automatic late fees</label>
    <div class="switch switch--on-off">
        <!-- labelled on/off switch -->
        <input role="switch" id="onOffSwitch" type="checkbox" class="switch__input" />
        <label for="onOffSwitch" class="switch__label switch__label--on-off">Automatic late fees</label>
    </div>
</div>
<div class="switch switch--on-off">
    <!-- hidden label on/off switch -->
    <input role="switch" id="onOffSwitch2" type="checkbox" class="switch__input" />
    <label for="onOffSwitch2" class="switch__label switch__label--on-off">Automatic late fees</label>
</div>
<h3>Small switch</h3>
<div class="switch switch--small">
    <input role="switch" id="smallSwitch" type="checkbox" class="switch__input" aria-label="Automatic late fees" />
</div>
<h3>Disabled switch</h3>
<div class="switch">
    <label for="disabledSwitch" class="switch__label switch__label--disabled">Automatic late fees</label>
    <input role="switch" type="checkbox" class="switch__input" id="disabledSwitch" disabled="true" />
</div>
<div class="switch switch--on-off">
    <input role="switch" type="checkbox" class="switch__input" id="disabledSwitch3" disabled="true" checked="checked" />
    <label for="disabledSwitch3" class="switch__label switch__label--on-off">Automatic late fees</label>
</div>

Name: switch

Styleguide 3.11
*/

@switch-height: 16px;
@switch-width: 30px;
@switch-width-on-off: 42px;
@switch-circle-size: 14px;
@switch-circle-size-ie: 12px;
@switch-height-small: 8px;
@switch-width-small: 15px;
@switch-circle-size-small: 6px;
@switch-circle-size-small-ie: 4px;
@switch-margin: 3px;
@switch-border-width: 1px;

.switch-circle-mixin(@size: @switch-circle-size) {
    display: block;
    height: @size;
    width: @size;
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);
}

.switch-disabled-lock() {
    .svgicon--lock;
    background-size: 7px;
    background-position: center;
}


/* Default Switch */

.switch {
    position: relative;
    display: inline-block;
}

.switch__input {
    // switch background
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    position: relative;
    box-sizing: content-box;
    height: @switch-height;
    width: @switch-width;
    margin: @switch-margin;
    background: @theme-grey10;
    border: @switch-border-width solid @theme-grey4;
    vertical-align: middle;
    border-radius: @switch-height;
    cursor: pointer;
    &:before {
        // switch circle
        content: " ";
        position: absolute;
        right: auto;
        left: 0;
        top: @switch-border-width;
        .switch-circle-mixin();
    }
    &::-ms-check {
        // switch circle IE
        .switch-circle-mixin(@switch-circle-size-ie);
        border-color: transparent;
        color: transparent;
        transform: translateX(-8px);
    }
    &:disabled {
        cursor: not-allowed;
        &:before {
            .switch-disabled-lock();
        }
        &::-ms-check {
            .switch-disabled-lock();
        }
        &:hover {
            border-color: @theme-grey4;
        }
    }
    &:focus {
        outline: none;
    }
}

.switch__input:checked {
    // switch background
    background: @theme-green1;
    border-color: @theme-green5;
    &:before {
        // switch circle
        right: 0;
        left: auto;
    }
    &::-ms-check {
        //switch circle IE
        transform: translateX(8px);
    }
    &:disabled {
        &:before {
            .svgicon--lock-green;
            background-size: 7px;
            background-position: center;
        }
        &::-ms-check {
            .svgicon--lock-green;
            background-size: 7px;
            background-position: center;
        }
        &:hover {
            border-color: @theme-green5;
        }
    }
}

.switch__input:disabled + .switch__label {
    cursor: not-allowed;
}

.switch__label {
    cursor: pointer;
}

.switch__label--disabled {
    cursor: not-allowed;
}

/* On-Off Switch */

.switch--on-off {
    display: inline-block;
    height: @switch-height + @switch-margin * 2;
    width: @switch-width-on-off + @switch-margin * 2;
    overflow: hidden;
    vertical-align: middle;
}

.switch__label--on-off {
    // visually hide input label
    display: inline-block;
    text-indent: -9999em;
    word-wrap: normal;
}

.switch--on-off > .switch__input {
    width: @switch-width-on-off;
    &::-ms-check {
        transform: translateX(-14px);
    }
}

@switch-left: @switch-margin + @switch-border-width + 2px;

.switch__label--on-off {
    &:before {
        content: 'off';
        height: @switch-height;
        display: block;
        position: absolute;
        top: 25%;
        left: 27px;
        text-transform: uppercase;
        color: @theme-grey9;
        font-size: 10px;
        font-weight: @font-weight-bold;
        text-indent: -6px;
        line-height: normal;
    }
}

.switch--on-off > .switch__input:checked {
    &::-ms-check {
        transform: translateX(14px);
    }
}

.switch__input:checked + .switch__label--on-off {
    &:before {
        content: 'on';
        color: white;
        left: @switch-left + @switch-circle-size;
    }
}

/* Small Switches */

.switch--small > .switch__input {
    height: @switch-height-small;
    width: @switch-width-small;
    border-radius: @switch-height-small;
    &:before {
        //switch circle
        height: @switch-circle-size-small;
        width: @switch-circle-size-small;
    }
    &::-ms-check {
        //switch circle IE
        height: @switch-circle-size-small-ie;
        width: @switch-circle-size-small-ie;
        transform: translateX(-4px);
    }
    &:checked::-ms-check {
        //switch circle IE
        transform: translateX(4px);
    }
    &:disabled {
        &:before {
            background: white;
        }
        &::-ms-check {
            background: white;
        }
    }
}