﻿
.switch[type="checkbox"] {
    outline: 0;
    user-select: none;
    display: inline-block;
    position: absolute;
    opacity: 0;
}

    .switch[type="checkbox"]:focus + label::before, .switch[type="checkbox"]:focus + label:before, .switch[type="checkbox"]:focus + label::after, .switch[type="checkbox"]:focus + label:after {
        outline: 1px dotted #b5b5b5;
    }

    .switch[type="checkbox"][disabled] {
        cursor: not-allowed;
    }

        .switch[type="checkbox"][disabled] + label {
            opacity: 0.5;
        }

            .switch[type="checkbox"][disabled] + label::before, .switch[type="checkbox"][disabled] + label:before {
                opacity: 0.5;
            }

            .switch[type="checkbox"][disabled] + label::after, .switch[type="checkbox"][disabled] + label:after {
                opacity: 0.5;
            }

            .switch[type="checkbox"][disabled] + label:hover {
                cursor: not-allowed;
            }

    .switch[type="checkbox"] + label {
        position: relative;
        display: initial;
        font-size: 1rem;
        line-height: initial;
        padding-left: 3.5rem;
        /*padding-top: 0.2rem;*/
        cursor: pointer;
    }

        .switch[type="checkbox"] + label::before, .switch[type="checkbox"] + label:before {
            position: absolute;
            display: block;
            top: 0;
            left: 0;
            width: 3rem;
            height: 1.5rem;
            border: 0.1rem solid transparent;
            border-radius: 4px;
            background: #b5b5b5;
            content: '';
        }

        .switch[type="checkbox"] + label::after, .switch[type="checkbox"] + label:after {
            display: block;
            position: absolute;
            top: 0.25rem;
            left: 0.25rem;
            width: 1rem;
            height: 1rem;
            transform: translate3d(0, 0, 0);
            border-radius: 4px;
            background: #fff;
            transition: all 0.25s ease-out;
            content: '';
        }

    .switch[type="checkbox"].is-rtl + label {
        padding-left: 0;
        padding-right: 3.5rem;
    }

        .switch[type="checkbox"].is-rtl + label::before, .switch[type="checkbox"].is-rtl + label:before {
            left: auto;
            right: 0;
        }

        .switch[type="checkbox"].is-rtl + label::after, .switch[type="checkbox"].is-rtl + label:after {
            left: auto;
            right: 0.25rem;
        }

    .switch[type="checkbox"]:checked + label::before, .switch[type="checkbox"]:checked + label:before {
        background: #00d1b2;
    }

    .switch[type="checkbox"]:checked + label::after {
        left: 1.625rem;
    }

    .switch[type="checkbox"]:checked.is-rtl + label::after, .switch[type="checkbox"]:checked.is-rtl + label:after {
        left: auto;
        right: 1.625rem;
    }

    .switch[type="checkbox"].is-outlined + label::before, .switch[type="checkbox"].is-outlined + label:before {
        background-color: transparent;
        border-color: #b5b5b5;
    }

    .switch[type="checkbox"].is-outlined + label::after, .switch[type="checkbox"].is-outlined + label:after {
        background: #b5b5b5;
    }

    .switch[type="checkbox"].is-outlined:checked + label::before, .switch[type="checkbox"].is-outlined:checked + label:before {
        background-color: transparent;
        border-color: #00d1b2;
    }

    .switch[type="checkbox"].is-outlined:checked + label::after, .switch[type="checkbox"].is-outlined:checked + label:after {
        background: #00d1b2;
    }

    .switch[type="checkbox"].is-thin + label::before, .switch[type="checkbox"].is-thin + label:before {
        top: 0.5454545455rem;
        height: 0.375rem;
    }

    .switch[type="checkbox"].is-thin + label::after, .switch[type="checkbox"].is-thin + label:after {
        box-shadow: 0px 0px 3px #7a7a7a;
    }

    .switch[type="checkbox"].is-rounded + label::before, .switch[type="checkbox"].is-rounded + label:before {
        border-radius: 24px;
    }

    .switch[type="checkbox"].is-rounded + label::after, .switch[type="checkbox"].is-rounded + label:after {
        border-radius: 50%;
    }

    .switch[type="checkbox"].is-small + label {
        position: relative;
        display: initial;
        font-size: 0.75rem;
        line-height: initial;
        padding-left: 2.75rem;
        padding-top: 0.2rem;
        cursor: pointer;
    }

        .switch[type="checkbox"].is-small + label::before, .switch[type="checkbox"].is-small + label:before {
            position: absolute;
            display: block;
            top: 0;
            left: 0;
            width: 2.25rem;
            height: 1.125rem;
            border: 0.1rem solid transparent;
            border-radius: 4px;
            background: #b5b5b5;
            content: '';
        }

        .switch[type="checkbox"].is-small + label::after, .switch[type="checkbox"].is-small + label:after {
            display: block;
            position: absolute;
            top: 0.25rem;
            left: 0.25rem;
            width: 0.625rem;
            height: 0.625rem;
            transform: translate3d(0, 0, 0);
            border-radius: 4px;
            background: #fff;
            transition: all 0.25s ease-out;
            content: '';
        }

    .switch[type="checkbox"].is-small.is-rtl + label {
        padding-left: 0;
        padding-right: 2.75rem;
    }

        .switch[type="checkbox"].is-small.is-rtl + label::before, .switch[type="checkbox"].is-small.is-rtl + label:before {
            left: auto;
            right: 0;
        }

        .switch[type="checkbox"].is-small.is-rtl + label::after, .switch[type="checkbox"].is-small.is-rtl + label:after {
            left: auto;
            right: 0.25rem;
        }

    .switch[type="checkbox"].is-small:checked + label::before, .switch[type="checkbox"].is-small:checked + label:before {
        background: #00d1b2;
    }

    .switch[type="checkbox"].is-small:checked + label::after {
        left: 1.25rem;
    }

    .switch[type="checkbox"].is-small:checked.is-rtl + label::after, .switch[type="checkbox"].is-small:checked.is-rtl + label:after {
        left: auto;
        right: 1.25rem;
    }

    .switch[type="checkbox"].is-small.is-outlined + label::before, .switch[type="checkbox"].is-small.is-outlined + label:before {
        background-color: transparent;
        border-color: #b5b5b5;
    }

    .switch[type="checkbox"].is-small.is-outlined + label::after, .switch[type="checkbox"].is-small.is-outlined + label:after {
        background: #b5b5b5;
    }

    .switch[type="checkbox"].is-small.is-outlined:checked + label::before, .switch[type="checkbox"].is-small.is-outlined:checked + label:before {
        background-color: transparent;
        border-color: #00d1b2;
    }

    .switch[type="checkbox"].is-small.is-outlined:checked + label::after, .switch[type="checkbox"].is-small.is-outlined:checked + label:after {
        background: #00d1b2;
    }

    .switch[type="checkbox"].is-small.is-thin + label::before, .switch[type="checkbox"].is-small.is-thin + label:before {
        top: 0.4090909091rem;
        height: 0.28125rem;
    }

    .switch[type="checkbox"].is-small.is-thin + label::after, .switch[type="checkbox"].is-small.is-thin + label:after {
        box-shadow: 0px 0px 3px #7a7a7a;
    }

    .switch[type="checkbox"].is-small.is-rounded + label::before, .switch[type="checkbox"].is-small.is-rounded + label:before {
        border-radius: 24px;
    }

    .switch[type="checkbox"].is-small.is-rounded + label::after, .switch[type="checkbox"].is-small.is-rounded + label:after {
        border-radius: 50%;
    }

    .switch[type="checkbox"].is-medium + label {
        position: relative;
        display: initial;
        font-size: 1.25rem;
        line-height: initial;
        padding-left: 4.25rem;
        padding-top: 0.2rem;
        cursor: pointer;
    }

        .switch[type="checkbox"].is-medium + label::before, .switch[type="checkbox"].is-medium + label:before {
            position: absolute;
            display: block;
            top: 0;
            left: 0;
            width: 3.75rem;
            height: 1.875rem;
            border: 0.1rem solid transparent;
            border-radius: 4px;
            background: #b5b5b5;
            content: '';
        }

        .switch[type="checkbox"].is-medium + label::after, .switch[type="checkbox"].is-medium + label:after {
            display: block;
            position: absolute;
            top: 0.25rem;
            left: 0.25rem;
            width: 1.375rem;
            height: 1.375rem;
            transform: translate3d(0, 0, 0);
            border-radius: 4px;
            background: #fff;
            transition: all 0.25s ease-out;
            content: '';
        }

    .switch[type="checkbox"].is-medium.is-rtl + label {
        padding-left: 0;
        padding-right: 4.25rem;
    }

        .switch[type="checkbox"].is-medium.is-rtl + label::before, .switch[type="checkbox"].is-medium.is-rtl + label:before {
            left: auto;
            right: 0;
        }

        .switch[type="checkbox"].is-medium.is-rtl + label::after, .switch[type="checkbox"].is-medium.is-rtl + label:after {
            left: auto;
            right: 0.25rem;
        }

    .switch[type="checkbox"].is-medium:checked + label::before, .switch[type="checkbox"].is-medium:checked + label:before {
        background: #00d1b2;
    }

    .switch[type="checkbox"].is-medium:checked + label::after {
        left: 2rem;
    }

    .switch[type="checkbox"].is-medium:checked.is-rtl + label::after, .switch[type="checkbox"].is-medium:checked.is-rtl + label:after {
        left: auto;
        right: 2rem;
    }

    .switch[type="checkbox"].is-medium.is-outlined + label::before, .switch[type="checkbox"].is-medium.is-outlined + label:before {
        background-color: transparent;
        border-color: #b5b5b5;
    }

    .switch[type="checkbox"].is-medium.is-outlined + label::after, .switch[type="checkbox"].is-medium.is-outlined + label:after {
        background: #b5b5b5;
    }

    .switch[type="checkbox"].is-medium.is-outlined:checked + label::before, .switch[type="checkbox"].is-medium.is-outlined:checked + label:before {
        background-color: transparent;
        border-color: #00d1b2;
    }

    .switch[type="checkbox"].is-medium.is-outlined:checked + label::after, .switch[type="checkbox"].is-medium.is-outlined:checked + label:after {
        background: #00d1b2;
    }

    .switch[type="checkbox"].is-medium.is-thin + label::before, .switch[type="checkbox"].is-medium.is-thin + label:before {
        top: 0.6818181818rem;
        height: 0.46875rem;
    }

    .switch[type="checkbox"].is-medium.is-thin + label::after, .switch[type="checkbox"].is-medium.is-thin + label:after {
        box-shadow: 0px 0px 3px #7a7a7a;
    }

    .switch[type="checkbox"].is-medium.is-rounded + label::before, .switch[type="checkbox"].is-medium.is-rounded + label:before {
        border-radius: 24px;
    }

    .switch[type="checkbox"].is-medium.is-rounded + label::after, .switch[type="checkbox"].is-medium.is-rounded + label:after {
        border-radius: 50%;
    }

    .switch[type="checkbox"].is-large + label {
        position: relative;
        display: initial;
        font-size: 1.5rem;
        line-height: initial;
        padding-left: 5rem;
        padding-top: 0.2rem;
        cursor: pointer;
    }

        .switch[type="checkbox"].is-large + label::before, .switch[type="checkbox"].is-large + label:before {
            position: absolute;
            display: block;
            top: 0;
            left: 0;
            width: 4.5rem;
            height: 2.25rem;
            border: 0.1rem solid transparent;
            border-radius: 4px;
            background: #b5b5b5;
            content: '';
        }

        .switch[type="checkbox"].is-large + label::after, .switch[type="checkbox"].is-large + label:after {
            display: block;
            position: absolute;
            top: 0.25rem;
            left: 0.25rem;
            width: 1.75rem;
            height: 1.75rem;
            transform: translate3d(0, 0, 0);
            border-radius: 4px;
            background: #fff;
            transition: all 0.25s ease-out;
            content: '';
        }

    .switch[type="checkbox"].is-large.is-rtl + label {
        padding-left: 0;
        padding-right: 5rem;
    }

        .switch[type="checkbox"].is-large.is-rtl + label::before, .switch[type="checkbox"].is-large.is-rtl + label:before {
            left: auto;
            right: 0;
        }

        .switch[type="checkbox"].is-large.is-rtl + label::after, .switch[type="checkbox"].is-large.is-rtl + label:after {
            left: auto;
            right: 0.25rem;
        }

    .switch[type="checkbox"].is-large:checked + label::before, .switch[type="checkbox"].is-large:checked + label:before {
        background: #00d1b2;
    }

    .switch[type="checkbox"].is-large:checked + label::after {
        left: 2.375rem;
    }

    .switch[type="checkbox"].is-large:checked.is-rtl + label::after, .switch[type="checkbox"].is-large:checked.is-rtl + label:after {
        left: auto;
        right: 2.375rem;
    }

    .switch[type="checkbox"].is-large.is-outlined + label::before, .switch[type="checkbox"].is-large.is-outlined + label:before {
        background-color: transparent;
        border-color: #b5b5b5;
    }

    .switch[type="checkbox"].is-large.is-outlined + label::after, .switch[type="checkbox"].is-large.is-outlined + label:after {
        background: #b5b5b5;
    }

    .switch[type="checkbox"].is-large.is-outlined:checked + label::before, .switch[type="checkbox"].is-large.is-outlined:checked + label:before {
        background-color: transparent;
        border-color: #00d1b2;
    }

    .switch[type="checkbox"].is-large.is-outlined:checked + label::after, .switch[type="checkbox"].is-large.is-outlined:checked + label:after {
        background: #00d1b2;
    }

    .switch[type="checkbox"].is-large.is-thin + label::before, .switch[type="checkbox"].is-large.is-thin + label:before {
        top: 0.8181818182rem;
        height: 0.5625rem;
    }

    .switch[type="checkbox"].is-large.is-thin + label::after, .switch[type="checkbox"].is-large.is-thin + label:after {
        box-shadow: 0px 0px 3px #7a7a7a;
    }

    .switch[type="checkbox"].is-large.is-rounded + label::before, .switch[type="checkbox"].is-large.is-rounded + label:before {
        border-radius: 24px;
    }

    .switch[type="checkbox"].is-large.is-rounded + label::after, .switch[type="checkbox"].is-large.is-rounded + label:after {
        border-radius: 50%;
    }

    .switch[type="checkbox"] self.is-mergeColorMaps.is-outlined:checked + label::before, .switch[type="checkbox"] self.is-mergeColorMaps.is-outlined:checked + label:before {
        background-color: transparent;
        border-color: !important;
    }

    .switch[type="checkbox"] self.is-mergeColorMaps.is-thin.is-outlined + label::after, .switch[type="checkbox"] self.is-mergeColorMaps.is-thin.is-outlined + label:after {
        box-shadow: none;
    }

    .switch[type="checkbox"] self.is-unchecked-mergeColorMaps.is-outlined + label::before, .switch[type="checkbox"] self.is-unchecked-mergeColorMaps.is-outlined + label:before {
        background-color: transparent;
        border-color: !important;
    }
