@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/toggle';

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

    .#{$prefix}--toggle {
        --#{$prefix}-support-success: #{tk.$msk--color-bg-input-selected};

        // focus color
        --#{$prefix}-focus: #{tk.$msk--color-border-focus-outer};

        // label
        .#{$prefix}--toggle__label-text {
            @include m.msk-input-label-text;
        }
        .#{$prefix}--toggle__text {
            --#{$prefix}-text-primary: #{tk.$msk--color-content-primary};
        }

        // checkmark inside circle
        .#{$prefix}--toggle__switch--checked {
            box-shadow: 0 0 0 1px tk.$msk--color-bg-input-selected;

            &::before {
                --#{$prefix}-icon-on-color: #{tk.$msk--color-bg-input};

                align-items: center;
                content: 'check';
                display: flex;
                /* stylelint-disable font-family-no-missing-generic-family-keyword */
                font-family: msk-icon;
                /* stylelint-enable font-family-no-missing-generic-family-keyword */
                justify-content: center;
            }
        }
    }
    // medium size
    .#{$prefix}--toggle__switch {
        /* ----- Off ----- */
        --#{$prefix}-toggle-off: #{tk.$msk--color-bg-input};
        block-size: m.msk-rem(30px);
        inline-size: m.msk-rem(54px);
        border-radius: 30px;

        box-shadow: 0 0 0 1px tk.$msk--color-border-input;

        &::before {
            --#{$prefix}-icon-on-color: #{tk.$msk--color-bg-input-inverse};
            block-size: m.msk-rem(24px);
            inline-size: m.msk-rem(24px);
        }
    }

    // small size
    .#{$prefix}--toggle__appearance--sm {
        .#{$prefix}--toggle__switch {
            block-size: m.msk-rem(14px);
            inline-size: m.msk-rem(30px);

            &::before {
                inset-block-start: 2px;
                inset-inline-start: 2px;
            }
        }

        .#{$prefix}--toggle__switch--checked {
            &::before {
                content: '';
            }
        }
    }
}