//
//  DIALTONE
//  COMPONENTS: LOADER
//
//  These are loader classes for Dialpad's design system Dialtone.
//  For further documentation of these and other classes,
//  visit https://dialtone.dialpad.com/components/loader
//
//  TABLE OF CONTENTS
//  • DEFAULT LOADER
//
//  ============================================================================
//  $   DEFAULT LOADER
//  ----------------------------------------------------------------------------
.d-loader {
  display: inline-grid;

  &__icon {
    grid-area: 1 / 1;
    opacity: var(--dt-opacity-1000);
    animation: d-loading-circle 900ms infinite linear;

    // Comet fade. Black is an intentional choice and only used for masking.
    mask-image: conic-gradient(
      from 270deg,
      black 0deg,
      black 105deg,
      transparent 170deg,
      transparent 180deg,
      black 234deg,
      black 360deg
    );
  }

  &__icon-track {
    grid-area: 1 / 1;
    opacity: var(--dt-opacity-200);
  }
}