@use "./mixins";
@use "../../../styles/tokens/color";

@layer components {
  .loader {
    @include mixins.base;

    &__body {
      @include mixins.body-base;
      @include mixins.size;

      .loader--large & {
        @include mixins.size(large);
      }

      .surface-secondary &,
      .surface-tertiary & {
        @include mixins.color-inverse();
      }
    }

    &__line {
      @include mixins.line-base;

      .surface-secondary &,
      .surface-tertiary & {
        @include mixins.line-color-inverse();
      }
    }

    &__messages {
      @include mixins.messages-base;

      .loader--large & {
        @include mixins.messages-large;
      }
    }
  }

  .loader-fullscreen {
    @include mixins.fullscreen-base;
  }

  .is-dark .loader-fullscreen {
    background-color: #333333f2; // color.$surface-subtle opacity 95%
  }
}