/*
Project:	Toggle Switchy
Version:	1.14
Updated:	8/20/2020
Author:		Adam Culpepper | @adamculpepper
Website:	https://toggleswitchy.com
Docs:		https://github.com/adamculpepper/toggle-switchy
Issues:		https://github.com/adamculpepper/toggle-switchy/issues
Releases:	https://github.com/adamculpepper/toggle-switchy/releases
*/

/* Colors: Default (blue) */
.toggle-switchy {
    color: #fff;
}
.toggle-switchy > input + .toggle:before {
    content: "MAC";
}
.toggle-switchy > input + .toggle:after {
    content: "WIN";
}
.toggle-switchy > input + .toggle > .switch {
    background: var(--mint);
}
.toggle-switchy > input + .toggle + .label {
    color: #000;
}
.toggle-switchy > input:checked + .toggle {
    background: var(--mint-light);
}
.toggle-switchy > input:not(:checked) + .toggle {
    background: var(--mint-light);
}
.toggle-switchy > input:checked + .toggle > .switch {
    border: 3px solid var(--mint);
}
.toggle-switchy > input:not(:checked) + .toggle > .switch {
    border: 3px solid var(--mint);
}
.toggle-switchy > input:focus + .toggle,
.toggle-switchy > input:active + .toggle {
    box-shadow: 0 0 5px 3px rgba(0, 119, 200, 0.5);
}

/* Rounded switch corners */
.toggle-switchy > input + .toggle {
    border-radius: 4px;
}
.toggle-switchy > input + .toggle .switch {
    border-radius: 6px;
}

/* //////////////////////////
CORE STYLES BELOW - NO TOUCHY
////////////////////////// */
.toggle-switchy {
    display: inline-flex;
    align-items: center;
    user-select: none;
    position: relative;
    vertical-align: middle;
    margin-bottom: 0;
}
.toggle-switchy:hover {
    cursor: pointer;
}
.toggle-switchy > input {
    position: absolute;
    opacity: 0;
}
.toggle-switchy > input + .toggle {
    align-items: center;
    position: relative;
}
.toggle-switchy > input + .toggle {
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}
.toggle-switchy > input[disabled] + .toggle {
    opacity: 0.5;
}
.toggle-switchy > input[disabled] + .toggle:hover {
    cursor: not-allowed;
}
.toggle-switchy > input + .toggle {
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.toggle-switchy > input + .toggle > .switch {
    display: block;
    height: 100%;
    position: absolute;
    right: 0;
    z-index: 3;
    box-sizing: border-box;
}

/* Labels */
.toggle-switchy > input + .toggle:before,
.toggle-switchy > input + .toggle:after {
    display: flex;
    align-items: center;
    position: absolute;
    z-index: 2;
    height: 100%;
}
.toggle-switchy > input + .toggle:before {
    right: 55%;
}
.toggle-switchy > input + .toggle:after {
    left: 50%;
}
.toggle-switchy > input + .toggle + .label {
    margin-left: 10px;
}
.toggle-switchy[data-label="left"] > input + .toggle {
    order: 2;
}
.toggle-switchy[data-label="left"] > input + .toggle + .label {
    order: 1;
    margin-left: 0;
    margin-right: 10px;
}

/* Show / Hide */
.toggle-switchy > input + .toggle:before {
    opacity: 0;
}
.toggle-switchy > input:checked + .toggle:before {
    opacity: 1;
}
.toggle-switchy > input:checked + .toggle:after {
    opacity: 0;
}

/* Transitions */
.toggle-switchy > input + .toggle {
    transition: background 200ms linear, box-shadow 200ms linear;
}
.toggle-switchy > input + .toggle:before,
.toggle-switchy > input + .toggle:after {
    transition: all 200ms linear;
}
.toggle-switchy > input + .toggle > .switch {
    transition: right 200ms linear, border-color 200ms linear;
}
/* //////////////////////////
CORE STYLES ABOVE - NO TOUCHY
////////////////////////// */
/* Size: Default (Medium) */
.toggle-switchy > input + .toggle {
    width: 80px;
    height: 30px;
}
.toggle-switchy > input + .toggle > .switch {
    width: 30px;
}
.toggle-switchy > input + .toggle:before,
.toggle-switchy > input + .toggle:after {
    font-size: 0.8rem;
}
.toggle-switchy > input:not(:checked) + .toggle > .switch {
    right: calc(100% - 30px);
}

/* Style: Rounded */
.toggle-switchy[data-style="rounded"] > input + .toggle,
.toggle-switchy[data-style="rounded"] > input + .toggle > .switch {
    border-radius: 50px;
}
.toggle-switchy[data-style="rounded"] > input + .toggle:before {
    right: 50%;
}
.toggle-switchy[data-style="rounded"] > input + .toggle:after {
    left: 50%;
}
