Checkbox: Disabled

%checkbox__label {
    display: block;
    position: relative;
    padding-left: size(4);
    color: $color-label;
    line-height: size(3);

    &:hover {
        color: $color-input-selected;
        cursor: pointer;
    }

    > span:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        display: inline-block;
        height: size(3);
        width: size(3);
        border: 1px solid $color-input-border;
        background-color: $color-input-background;
        background-position: center center;
        background-size: size(1.5);
        background-repeat: no-repeat;
        // Makes lable center aligned with input field
        margin-top: -2px;
    }

    input {
        position: absolute;
        height: size(3);
        width: size(3);
        top: 0;
        left: 0;
        opacity: 0;
    }

    input:checked ~ span {
        color: $color-input-selected;
        border-color: $color-input-selected;

        @include color-theme {
            color: $arg-theme-color;
        }

        &:before {
            background-color: $color-input-selected;
            background-image: url('x.svg');

            @include color-theme {
                background-color: $arg-theme-color;
            }
        }
    }

    input:focus-visible ~ span {
        color: $color-input-selected;

        &:before {
            border-width: 2px;
            border-color: $color-black;
        }
    }

    input[aria-invalid='true']:not(:checked) ~ span, input.error {
        color: $color-error;

        &:before {
            border-color: $color-input-border-error;
        }
    }

    input:disabled + & {
        color: $color-input-color-disabled;
        &:before {
            border-color: $color-input-border-disabled;
            background-color: $color-input-background-disabled;
        }
    }
}

%simple-checkbox__label {
    display: inline-block;
    vertical-align: top;
    padding-right: size(5);
    padding-left: 0;
    line-height: size(4);
    font-weight: 400;

    > span:before {
        content: '';
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        left: auto;
        background-color: inherit;
        border: none;
    }

    input {
        top: 2px;
        right: 0;
        left: auto;
    }

    input:checked ~ span {
        font-weight: 700;
        &:before {
            background-image: url('close.svg');
            background-color: inherit;
        }
    }
}

.checkbox__label {
    @extend %checkbox__label;

    .checkbox__item--simple & {
        @extend %simple-checkbox__label;
    }
}