.checkbox__label {
    cursor: pointer;
    display: flex;
    line-height: rem(22px);
    margin-bottom: $spacing-md;
}

.checkbox__input {
    cursor: pointer;
    height: 0;
    opacity: 0;
    position: absolute;
    width: 0;

    &:checked {
        ~ .checkbox__checkmark {
            border: 1px solid $color-primary;
            @include media-breakpoint-down(sm) {
                background-color: $color-shade-lightest;
            }

            .checkbox__icon {
                color: $color-secondary;
                display: block;
                font-size: $font-size-xs;
                padding: 2px 1px;
            }
        }
    }
}

.checkbox__checkmark {
    background-color: $color-shade-lightest;
    border: 1px solid $color-shade-dark;
    border-radius: $border-radius-xs;
    flex: 0 0 rem(22px);
    height: rem(22px);
    margin-right: $spacing-sm;
    order: -1;
}

.checkbox__icon {
    display: none;
}
