.#{$pretty--class-name} {
    @each $name, $color in $pretty--colors {
        input:checked ~ .state.p-#{$name},
        &.p-toggle .state.p-#{$name} {
            label:after {
                background-color: $color !important;
            }

            .icon,
            .svg {
                color: #fff;
                stroke: #fff;
            }
        }

        input:checked ~ .state.p-#{$name}-o,
        &.p-toggle .state.p-#{$name}-o {
            label:before {
                border-color: $color;
            }

            label:after {
                background-color: transparent;
            }

            .icon,
            .svg,
            svg {
                color: $color;
                stroke: $color;
            }
        }

        &.p-default:not(.p-fill) input:checked ~ .state.p-#{$name}-o label {
            &:after {
                background-color: $color !important;
            }
        }

        &.p-switch input:checked ~ .state.p-#{$name}:before {
            border-color: $color;
        }

        &.p-switch.p-fill input:checked ~ .state.p-#{$name}:before {
            background-color: $color !important;
        }

        &.p-switch.p-slim input:checked ~ .state.p-#{$name}:before {
            border-color: darken($color, 20%);
            background-color: darken($color, 20%) !important;
        }
    }
}