@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/loading';
@use '@carbon/styles/scss/components/inline-loading';

@mixin msk-loading {
    @include loading.loading;
    @include inline-loading.inline-loading;

    /* ----- Global ----- */
    .#{$prefix}--loading,
    .#{$prefix}--inline-loading {
        line-height: 1;

        .#{$prefix}--loading__stroke {
            stroke: tk.$msk--color-border-progress-filled;
        }

        .#{$prefix}--loading__background {
            stroke: tk.$msk--color-border-progress;
        }

        &.#{$prefix}--loading--small {
            height: m.msk-rem(16px);
            width: m.msk-rem(16px);
            .#{$prefix}--loading__svg {
                stroke: tk.$msk--color-border-progress-filled;
            }
        }

        .#{$prefix}--loading__svg {
            circle {
                stroke-linecap: round;
            }
        }
    }

    /* ----- Inline ----- */
    .#{$prefix}--inline-loading {
        .#{$prefix}--inline-loading__text {
            color: tk.$msk--color-content-secondary;
            font-size: v.$msk--size-1;
            letter-spacing: 0;
            line-height: 1.5rem;
        }
    }
}