.checkbox {
    position: relative
}

.checkbox__input {
    opacity: 0;
    position: absolute;
    margin: var(--size-5xs);
    height: var(--size-m);
    width: var(--size-m)
}

.checkbox__input:disabled + .checkbox__label::before {
    border: var(--border-m) solid var(--checkbox-border-color)
}

.checkbox__input:focus + .checkbox__label::before {
    outline: 10
}

[data-whatinput=keyboard] .checkbox__input:focus + .checkbox__label::before {
    transition: color .2s ease, outline .2s ease;
    border-radius: var(--accessibility-border-radius);
    outline: var(--accessibility-border) solid var(--accessibility-focus-color);
    outline-offset: var(--accessibility-space-border)
}

.checkbox__label {
    display: inline-flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    word-wrap: break-word;
    margin-left: calc(var(--size-m) + var(--size-xs));
    font-size: var(--font-size-3xs);
    line-height: var(--line-height-2xs);
    align-items: center;
    letter-spacing: var(--letter-spacing-2xs);
    cursor: pointer
}

.checkbox__label::before {
    background-color: var(--checkbox-background-color);
    border: var(--checkbox-border-width) solid var(--checkbox-border-color);
    border-radius: var(--checkbox-border-radius);
    color: var(--checkbox-icon-color);
    font-size: var(--font-size-xs);
    height: var(--size-m);
    width: var(--size-m);
    left: 0;
    top: 0;
    line-height: calc(var(--size-m) - var(--border-m) * 2);
    position: absolute;
    text-align: left
}

.checkbox__label:hover::before {
    border: var(--border-m) solid var(--checkbox-hover-border-color)
}

.checkbox__label--xxl .checkbox__label {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs);
    letter-spacing: var(--letter-spacing-xs)
}

.checkbox__label--xxl .checkbox__label::before {
    top: var(--size-4xs)
}

.checkbox--negative .checkbox__label {
    color: var(--negative)
}

.checkbox--negative .checkbox__input:not(:checked) + .checkbox__label::before {
    background-color: inherit;
    border: var(--border-m) solid var(--negative)
}

.checkbox--negative .checkbox__input:checked + .checkbox__label::before {
    background-color: var(--default-white);
    color: var(--interactive-text);
    border: var(--border-m) solid var(--negative)
}

.checkbox--negative .checkbox__input:disabled + .checkbox__label {
    color: var(--negative-dimmed)
}

.checkbox--negative .checkbox__input:checked:disabled + .checkbox__label::before {
    color: var(--negative)
}

.checkbox--negative .checkbox__input:disabled + .checkbox__label::before {
    background-color: var(--negative-dimmed)
}

.checkbox__input:checked + .checkbox__label::before {
    background-color: var(--interactive-primary);
    border-color: var(--interactive-primary)
}

.checkbox__input:not(:checked) + .checkbox__label::before {
    content: ""
}

.checkbox__input:disabled + .checkbox__label::before {
    background-color: var(--grey-7)
}

.checkbox__input:checked:disabled + .checkbox__label::before {
    background-color: var(--grey-5);
    border-color: var(--grey-5)
}

.checkbox__input:disabled + .checkbox__label {
    cursor: not-allowed;
    color: var(--grey-5)
}