/*
 * Prevent Duplicate Tabs
 * Copyright (c) 2023 Guilherme Nascimento (brcontainer@yahoo.com.br)
 * Released under the MIT license
 *
 * https://github.com/brcontainer/prevent-duplicate-tabs
 */

.toggle {
    position: relative;
    display: inline-block;
    z-index: 1;
}

.toggle > input {
    position: absolute;
    bottom: -0.82em;
    left: 2em;
    opacity: 0;
    pointer-events: none;
}

.toggle > label {
    position: relative;
    display: block;
    height: 1.92em;
    width: 3.5em;
    background-color: #dbddde;
    border-radius: 100px;
    cursor: pointer;
    transition: all .3s ease;
}

.toggle > label::before, .toggle > label::after {
    position: absolute;
    z-index: 2;
    left: .13em;
    top: .13em;
    display: block;
    width: 1.65em;
    height: 1.65em;
    transition: .3s ease;
    transition-property: left, color;
}

.toggle > label::before {
    position: absolute;
    left: 2.25em;
    top: .32em;
    content: "\2718";
    font-variant: small-caps;
    font-size: .85em;
    text-align: center;
    color: #868171;
}

.toggle > input:checked ~ label::before {
    left: .2em;
    color: #fff;
    content: "\2714";
}

.toggle > label::after {
    border-radius: inherit;
    background: #fff;
    content: "";
}

.toggle > input:checked ~ label {
    background-color: #4cda64;
}

.toggle > input:checked ~ label::after {
    left: 1.73em;
}

.toggle > input:disabled ~ label {
    background-color: #d5d5d5;
    pointer-events: none;
}

.toggle > input:disabled ~ label::after {
    background-color: rgba(255,255,255,.3);
}

.toggle.red > input:checked ~ label {
    background-color: #e20b0b;
}