/* /**********************************************************************\
*                                Odatix                                *
************************************************************************
*
* Copyright (C) 2022 Jonathan Saussereau
*
* This file is part of Odatix.
* Odatix is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
* 
* Odatix is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
* 
* You should have received a copy of the GNU General Public License
* along with Odatix. If not, see <https://www.gnu.org/licenses/>.
*
*/

.checklist-switch input[type="checkbox"] {
    display: none;
}

.checklist-switch label {
    position: relative;
    padding-left: 50px;
    cursor: pointer;
    font-size: 1em;
}

.checklist-switch label:before {
    content: "";
    position: absolute;
    left: 0;
    top: -2px;
    width: 40px;
    height: 22px;
    background: var(--switch-off-background);
    border: var(--switch-off-border-style) #d1d5da;
    border-radius: 22px;
    transition: background 0.15s;
}

.checklist-switch label:has(input[type="checkbox"]:checked):before {
    background: var(--switch-on-background);
    border: var(--switch-on-border-style) var(--switch-on-handle-background);
}

.checklist-switch label:after {
    content: "";
    position: absolute;
    left: 4px;
    top: 2px;
    width: 16px;
    height: 16px;
    background: var(--switch-off-handle-background);
    border-radius: 50%;
    transition: left 0.15s;
}

.checklist-switch label:has(input[type="checkbox"]:checked):after {
    left: 22px;
    background: var(--switch-on-handle-background);
}
