.#{$pui}switch {
    @include control;
    @include sizes;
    @include transitions;

    display: inline-block;
    position: relative;

    padding-top: calc(#{$switch-size} + 1px);
    padding-left: calc(#{$switch-size} * 1.75);

    border-width: 1px;
    border-style: solid;
    border-color: $color-border-gray;
    border-radius: 999px;

    background-color: $color-dark-gray-bg;

    transition-property: border-color, background-color, color;

    &:not([disabled]):hover {
        border-color: $color-gray;

        .#{$pui}mark {
            border-color: $color-gray;
        }
    }

    .#{$pui}mark {
        @include transitions;

        position: absolute;
        top: 0;
        left: -1px;

        padding-left: $switch-size;
        padding-top: $switch-size;

        background-color: $color-white;

        border-radius: 999px;
        border-width: 1px;
        border-style: solid;
        border-color: $color-border-gray;

        transition-property: left;
    }

    &.checked {
        .#{$pui}mark {
            left: calc(#{$switch-size} * .75);
            background-color: $color-white;
        }

        @each $name, $color in $color-schema {
            &.is-#{$name} .mark {
                border-color: $color
            }
        }

        @include ui-colors($hover: true);
    }

    &[disabled], &[disabled].checked {
        border-color: $color-border-gray;
        background-color: $color-border-gray;
        color: $color-dark-gray;

        .#{$pui}mark {
            border-color: $color-border-gray;
        }
    }
}