.checkbox {
    --border: solid 2px var(--navy-blue-80);
    --background-color: var(--white);
    --checked-color: var(--digital-blue-60);
    --svg-underterminate-top: -4px;
    --svg-underterminate-left: 3px;
    --svg-checked-top: 1px;
    --svg-checked-left: 2px;

    .checkbox-button {
        position: relative;
        width: 18px;
        min-width: 18px;
        height: 18px;
        padding: 0;
        background: var(--background-color);
        border: var(--border);
        border-radius: 4px;
        outline: none;
        cursor: pointer;
        transition: all 200ms;
    }

    input[type='checkbox'] {
        display: none;

        & + button {
            @extend .checkbox-button;

            &::after {
                position: absolute;
                top: 7px;
                left: 7px;
                display: inline-block;
                width: 0;
                height: 0;
                background-color: transparent;
                border-radius: 100%;
                transition: all 300ms ease;
                content: '';
            }

            &:focus {
                --border: solid 2px var(--digital-blue-60);
            }

            &:focus::after {
                top: -6px;
                left: -6px;
                display: inline-block;
                width: 26px;
                height: 26px;
            }
        }

        &:checked + button {
            --background-color: var(--digital-blue-60);
            --border: solid 2px var(--digital-blue-60);

            &:focus,
            &:hover {
                --background-color: var(--digital-blue-80);
                --border: solid 2px var(--digital-blue-80);
            }

            &::before {
                position: absolute;
                top: var(--svg-checked-top);
                left: var(--svg-checked-left);
                content: url('../resources/icons/svg/content/checkbox.svg');
            }

            &:disabled {
                cursor: default;
            }
        }

        &:indeterminate + button {
            position: relative;

            &::before {
                position: absolute;
                top: var(--svg-underterminate-top);
                left: var(--svg-underterminate-left);
                content: url('../resources/icons/svg/content/undeterminate-checkbox.svg');
            }

            &:disabled {
                cursor: default;
            }
        }

        &:disabled {
            & + button,
            & + button:hover {
                --background-color: var(--grey-20);
                --border: solid 2px var(--grey-50);

                cursor: default;
            }

            &:checked {
                & + button::before {
                    position: absolute;
                    content: url('../resources/icons/svg/content/disabled-checkbox.svg');
                }
            }

            &:indeterminate + button::before {
                position: absolute;
                content: url('../resources/icons/svg/content/disabled-undeterminate-checkbox.svg');
            }

            & ~ .help-text,
            & ~ .description {
                color: var(--grey-60);
            }
        }
    }

    .checkbox-row {
        margin-right: calc(4 * 0.5rem);
    }

    &.checkbox-label {
        display: inline-flex;
        align-items: center;
        color: var(--title-text-color);
        line-height: 17px;
        vertical-align: middle; // Required to properly position checkboxes into tables

        .label {
            cursor: pointer;
        }

        &.checkbox-clear {
            display: flex;
        }

        > label,
        > span > label {
            margin-right: calc(4 * 0.5rem);
            margin-left: 18px;
            cursor: pointer;
        }

        button {
            line-height: inherit;
        }

        button:disabled + label {
            cursor: default;
            opacity: 0.4;
        }

        button + .label,
        .label + .checkbox + button {
            margin-left: 18px;
        }
    }

    label[for].checkbox-label {
        cursor: pointer;
    }

    &.checkbox-labels-group {
        .checkbox-label {
            display: flex;

            // Deprecated, use the checkbox-group-option class instead.
            & + .checkbox-label {
                margin-top: 10px;
            }
        }

        .checkbox-group-option + .checkbox-group-option {
            margin-top: 10px;
        }
    }
}

.checkbox-option-padding {
    padding-left: 36px;
}