@use '@mskcc/themes/tokens' as tk;
@use '@carbon/styles/scss/config' as *;
@use '@mskcc/fundamentals/src/_variables.scss' as v;
@use '@mskcc/fundamentals/src/_mixins.scss' as m;
@use '@mskcc/colors' as c;
@use '@carbon/styles/scss/components/checkbox';

@mixin msk-checkbox {
    @include checkbox.checkbox;

    /* ----- Global ----- */
    .#{$prefix}--checkbox-label {
        --#{$prefix}-body-compact-01-font-size: #{v.$msk--size-2};
        --#{$prefix}-body-compact-01-font-weight: 400;
        --#{$prefix}-body-compact-01-line-height: 1.2;
        --cds-icon-inverse: #{tk.$msk--color-content-input-selected};

        @include m.msk-input-label-text;

        // checkbox border color
        &::before {
            --#{$prefix}-icon-primary: #{tk.$msk--color-border-input};
        }
    }

    // background color
    .#{$prefix}--checkbox:checked + .#{$prefix}--checkbox-label::before,
    .#{$prefix}--checkbox:indeterminate + .#{$prefix}--checkbox-label::before,
    .#{$prefix}--checkbox-label[data-contained-checkbox-state='true']::before {
        --#{$prefix}-icon-primary: #{tk.$msk--color-bg-input-selected};
    }

    // focus
    .#{$prefix}--checkbox:focus + .#{$prefix}--checkbox-label {
        @include m.msk-input-focus(true);
    }

    // disable focus
    .msk-checkbox-group--disable-focus,
    .msk-checkbox--disable-focus {
        .#{$prefix}--checkbox:focus + .#{$prefix}--checkbox-label {
            box-shadow: unset;
        }
    }

    // Hover state
    .#{$prefix}--checkbox:not(:disabled) + .#{$prefix}--checkbox-label {
        padding-right: 0.25rem;

        &:hover {
            background-color: tk.$msk--color-bg-input-item-hover;
            border-radius: m.msk-rem(4px);
        }
    }

    //----------------------------------------------
    // Disabled
    // ---------------------------------------------
    .#{$prefix}--checkbox:disabled + .#{$prefix}--checkbox-label,
    .#{$prefix}--checkbox-label[data-contained-checkbox-disabled='true'] {
        --#{$prefix}-text-disabled: #{tk.$msk--color-content-disabled};
    }

    .#{$prefix}--checkbox:disabled + .#{$prefix}--checkbox-label::before,
    .#{$prefix}--checkbox-label[data-contained-checkbox-disabled='true']::before {
        --#{$prefix}-icon-disabled: #{tk.$msk--color-content-disabled};

        background-color: tk.$msk--color-bg-disabled;
    }

    .#{$prefix}--checkbox:checked:disabled
        + .#{$prefix}--checkbox-label::before,
    .#{$prefix}--checkbox:indeterminate:disabled
        + .#{$prefix}--checkbox-label::before,
    .#{$prefix}--checkbox-label[data-contained-checkbox-state='true'][data-contained-checkbox-disabled='true']::before {
        --#{$prefix}-icon-disabled: #{tk.$msk--color-content-disabled};
    }

    // Unchecked
    .#{$prefix}--checkbox:focus + .#{$prefix}--checkbox-label::before,
    .#{$prefix}--checkbox-label__focus::before,
    .#{$prefix}--checkbox:checked:focus + .#{$prefix}--checkbox-label::before,
    .#{$prefix}--checkbox-label[data-contained-checkbox-state='true'].#{$prefix}--checkbox-label__focus::before,
    .#{$prefix}--checkbox:indeterminate:focus
        + .#{$prefix}--checkbox-label::before {
        outline: none;
    }

    .msk-checkbox-group-horizontal {
        border: 0;
        box-sizing: border-box;
        display: flex;
        margin: 0;
        max-width: fit-content;
        padding: 0;
        position: relative;

        .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper {
            margin-bottom: 0;

            &:not(:last-of-type) {
                margin-right: 1rem;
            }
        }

        .#{$prefix}--form__helper-text {
            bottom: -8px;
            left: 0;
            position: absolute;
            transform: translateY(100%);
        }
    }

    //----------------------------------------------
    // Invalid + warn
    // ---------------------------------------------
    .#{$prefix}--checkbox-group[data-invalid] .cds--checkbox-label::before,
    .#{$prefix}--checkbox-wrapper--invalid .cds--checkbox-label::before,
    .#{$prefix}--checkbox-wrapper--invalid
        .#{$prefix}--checkbox:checked
        + .#{$prefix}--checkbox-label::before {
        --#{$prefix}-support-error: #{tk.$msk--color-border-input};
        box-shadow: 0 0 0 m.msk-rem(1px) tk.$msk--color-bg-input,
            0 0 0 m.msk-rem(3px) tk.$msk--color-border-error;
    }

    .#{$prefix}--checkbox-group:not(.#{$prefix}--checkbox-group[data-invalid])
        .#{$prefix}--checkbox-wrapper--invalid
        .cds--checkbox-label::before,
    .#{$prefix}--checkbox-group:not(.#{$prefix}--checkbox-group[data-invalid])
        .#{$prefix}--checkbox-wrapper--invalid
        .#{$prefix}--checkbox:checked
        + .#{$prefix}--checkbox-label::before {
        --#{$prefix}-icon-primary: #{v.$input-default-border-color};

        @include m.input-invalid-focus;
    }

    .#{$prefix}--checkbox-group__validation-msg,
    .#{$prefix}--checkbox__validation-msg {
        margin-top: m.msk-rem(8px);
    }

    .#{$prefix}--checkbox-group--invalid
        .#{$prefix}--checkbox-group__validation-msg
        .#{$prefix}--form-requirement,
    .#{$prefix}--checkbox-group--warning
        .#{$prefix}--checkbox-group__validation-msg
        .#{$prefix}--form-requirement,
    .#{$prefix}--checkbox-wrapper--invalid
        .#{$prefix}--checkbox__validation-msg
        .#{$prefix}--form-requirement,
    .#{$prefix}--checkbox-wrapper--warning
        .#{$prefix}--checkbox__validation-msg
        .#{$prefix}--form-requirement {
        margin-left: 0;
    }

    // Error and warning

    .#{$prefix}--checkbox-group--invalid
        .#{$prefix}--checkbox-group__validation-msg,
    .#{$prefix}--checkbox-group--warning
        .#{$prefix}--checkbox-group__validation-msg,
    .#{$prefix}--checkbox-wrapper--invalid
        > .#{$prefix}--checkbox__validation-msg,
    .#{$prefix}--checkbox-wrapper--warning
        > .#{$prefix}--checkbox__validation-msg {
        --cds-text-error: #{tk.$msk--color-content-error};
        color: tk.$msk--color-content-error;
    }

    .#{$prefix}--checkbox__invalid-icon,
    .#{$prefix}--checkbox__invalid-icon--warning {
        --cds-support-error: #{tk.$msk--color-content-error};
        --cds-support-warning: #{tk.$msk--color-content-error};

        margin: 0 m.msk-rem(8px) 0 m.msk-rem(2px);
        color: tk.$msk--color-content-error;
    }

    //----------------------------------------------
    // Styling for difference sizes
    // ---------------------------------------------

    // Medium size
    .msk-checkbox-group-md {
        // spacing between
        .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper {
            margin-bottom: m.msk-rem(8px);
        }
        .#{$prefix}--checkbox-label {
            line-height: 1.4;
            padding-bottom: 1px;
        }

        // Checkbox size
        .#{$prefix}--checkbox-label::before {
            height: m.msk-rem(20px);
            width: m.msk-rem(20px);
        }

        .#{$prefix}--checkbox-label-text {
            padding-left: m.msk-rem(6px + 4px);
        }

        .#{$prefix}--checkbox-label::after {
            border-bottom-width: 2px;
            border-left-width: 2px;
            height: m.msk-rem(8px);
            top: m.msk-rem(5px);
            width: m.msk-rem(14px);
        }

        // Indeterminate symbol
        .#{$prefix}--checkbox:indeterminate
            + .#{$prefix}--checkbox-label::after {
            top: m.msk-rem(10px);
            width: m.msk-rem(12px);
        }
    }

    // Large size
    .msk-checkbox-group-lg {
        // spacing between
        .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper {
            margin-bottom: m.msk-rem(12px);
        }
        .#{$prefix}--checkbox-label {
            line-height: 1.4;
            padding-bottom: m.msk-rem(4px);
            padding-top: m.msk-rem(5px);
        }

        // Checkbox size
        .#{$prefix}--checkbox-label::before {
            height: m.msk-rem(24px);
            width: m.msk-rem(24px);
        }

        .#{$prefix}--checkbox-label-text {
            padding-left: m.msk-rem(6px + 4px + 4px);
        }

        .#{$prefix}--checkbox-label::after {
            border-bottom-width: 2px;
            border-left-width: 2px;
            height: m.msk-rem(10px);
            top: m.msk-rem(4px);
            width: m.msk-rem(18px);
        }

        // Indeterminate symbol
        .#{$prefix}--checkbox:indeterminate
            + .#{$prefix}--checkbox-label::after {
            top: m.msk-rem(10px);
            width: m.msk-rem(16px);
        }
    }
}