.#{$pretty--class-name}.p-switch {
    input {
        min-width: 2em;
    }
    .state {
        position: relative;

        &:before {
            content: '';
            border: 1px solid $pretty--color-default;
            border-radius: 60px;
            width: 2em;
            box-sizing: unset;
            height: $pretty--box-size;
            position: absolute;
            top: 0;
            top: $pretty-top-offset-switch;
            z-index: $pretty--z-index-back;
            transition: all 0.5s ease;
        }

        label {
            text-indent: $pretty--label-text-offset-switch;

            &:before,
            &:after {
                transition: all 0.5s ease;
                border-radius: 100%;
                left: 0;
                border-color: transparent;
                transform: scale(0.8);
            }

            &:after {
                background-color: $pretty--color-default !important;
            }
        }
    }

    input:checked ~ .state {
        &:before {
            border-color: $pretty--color-dark;
        }

        label:before {
            opacity: 0;
        }

        label:after {
            background-color: $pretty--color-dark !important;
            left: 1em;
        }
    }
}