@import "../../colors";

input[type="checkbox"].formik-checkbox {
    display: block;
    float: left;
    margin-right: .625rem;
    border: 1px solid $active-dark-gray;
    border-radius: 3px;
    width: 1.25rem;
    height: 1.25rem;
    appearance: none;

    &:focus {
        transition: all .25s ease;
        outline: none;
        box-shadow: 0 0 0 .25rem $ui-blue-25percent;
    }

    &:checked {
        background-color: $ui-blue;
        text-align: center;
        text-indent: .125rem;
        line-height: 1.25rem;
        font-size: .75rem;

        &:after {
            color: $type-white;
            content: "\2714";
        }
    }
}