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

    display: inline-block;

    position: relative;

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

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

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

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

    .#{$pui}mark {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: inline-block;
        opacity: 0;
    }

    &.checked {
        .#{$pui}mark {
            opacity: 1;
        }

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

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