@use '../abstracts/cds-vars' as vars;
@use '../abstracts/cds-mixins' as mixins;
@use '../abstracts/cds-config' as config;

.cds-loader {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    /* DEFAULT */
    gap: vars.$cds-spacing-50;

    &__spinner {
        color: var(--cds-color-accent-primary-main);
        @include mixins.cds-icon(config.$default-icon-spinner);
        //animation: rotation 1s infinite ease-in-out;

        /* DEFAULT */
        &::before {
            @include mixins.cds-icon-size(vars.$cds-icon-300);
        }
    }

    &__text {
        @include mixins.cds-paragraph-m;
    }

    &--small {
        gap: vars.$cds-spacing-25;

        .cds-loader__text {
            @include mixins.cds-paragraph-s;
        }

        .cds-loader__spinner::before {
            @include mixins.cds-icon-size(vars.$cds-icon-150);
        }
    }

    &--medium {
        gap: vars.$cds-spacing-50;

        .cds-loader__spinner::before {
            @include mixins.cds-icon-size(vars.$cds-icon-300);
        }
    }

    &--large {
        gap: vars.$cds-spacing-100;

        .cds-loader__text {
            @include mixins.cds-paragraph-l;
        }

        .cds-loader__spinner::before {
            @include mixins.cds-icon-size(vars.$cds-icon-600);
        }
    }
}