@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;
        background-image: url("/svgs/forms/checkmark.svg");
        background-position: center;
    }
}

.formik-checkbox-label {
    padding-top: .0625rem;
    display: block;
}