/*------------------------------------*\
    CHECKBOXES
\*------------------------------------*/

@use "../../base/helpers";
@use "../../base/settings";

.ds_checkbox {
    @include helpers.ds_radiocheckboxstates();

    &__label::after {
        background-color: transparent;
        border-style: solid;
        border-width: 0 0 0.3125rem 0.3125rem;
        border-top-color: transparent;
        left: 0.4375rem;
        height: 0.875rem;
        top: 0.375rem;
        width: 1.625rem;
        transform: rotate(-45deg);
    }

    /// checked
    &__input:checked + &__label::before {
        background-color: currentColor;
    }

    &__input:not(:focus):checked + &__label::after {
        border-color: settings.$ds_colour__text--reversed;
    }

    &__input:focus:checked + &__label::before {
        background-color: settings.$ds_colour__link--focus__background;
    }

    &--small &__label::after {
        border-width: 0.375rem;
        left: 0.875rem;
        top: 0.875rem;
    }

    &--small &__label::after {
        width: 0.8125rem;
        height: 0.4375rem;
        left: 0.8125rem;
        top: 0.6875rem;
        border-width: 0 0 0.1875rem 0.1875rem;
    }

    .ds_question__error-message {
        margin-left: 1rem;
    }
}

.ds_checkboxes > .ds_checkbox:last-child {
    margin-bottom: 0.25rem;
}

.ds_checkbox-separator {
    font-weight: 700;
    margin: 1.5rem 0;
    text-align: center;
    width: 2.5rem;
}

@include helpers.ds_media-query(medium) {
    .ds_checkbox {
        &__label::after {
            top: 0.625rem;
        }

        &--small &__label::after {
            top: 0.9375rem;
        }
    }
}