.filter-checkbox {
    position: absolute;
    opacity: 0;
}

    .filter-checkbox + label {
        position: relative;
        cursor: pointer;
        padding: 0;
        word-break: break-word;
        hyphens: auto;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
    }

.filter-checkbox + label:before {
    content: "";
    margin-right: 0.625rem;
    display: inline-block;
    vertical-align: text-top;
    min-width: 1.125rem;
    min-height: 1.125rem;
    max-height: 1.125rem;
    max-width: 1.125rem;
    border: 0.125rem solid var(--primary-dark-green);
    background: white;
    position: relative;
    bottom: 1px;
    border-radius: 4px;
}

@media only screen and (max-width: 1240px) {
    .filter-checkbox + label:before {
        bottom: 2px;
    }
}

@-moz-document url-prefix() {
    .filter-checkbox + label:before {
        bottom: 4px;
    }
}

.filter-checkbox:hover:not(:checked) + label:before {
    border: 0.25rem solid var(--primary-dark-green-3);
    outline: 0;
    min-width: 0.875rem;
    min-height: 0.875rem;
    max-height: 0.875rem;
    max-width: 0.875rem;
}

.filter-checkbox:checked + label:before {
    background: var(--primary-dark-green);
}

.filter-checkbox:disabled + label {
    color: #b8b8b8;
    cursor: auto;
}

.filter-checkbox:disabled + label:before {
    box-shadow: none;
    background: #ddd;
}

/* When checkbox is clicked with mouse, do not have outline */
.filter-checkbox:focus + label::before {
    box-shadow: none;
}

/* Create outline when element is focused when tabbing */
.filter-checkbox:focus-visible + label::before {
    box-shadow: 0 0 0 0.1875rem var(--link-color-purple);
    border: 0.125rem solid var(--link-color-purple);
}

.filter-checkbox:checked:focus-visible + label::before {
    background: var(--link-color-blue);
}

.filter-checkbox:checked + label:after {
    content: "";
    position: absolute;
    left: 0.4375rem;
    top: 0.1rem;
    width: 0.3125rem;
    height: 0.75rem;
    border: 0.375rem solid white;
    border-width: 0 0.125rem 0.125rem 0;
    transform: rotate(45deg);
}

@-moz-document url-prefix() {
    .filter-checkbox:checked + label:after {
        top: unset;
        bottom: 6px;
    }
}