Untitled

//----------------------------------------
//  Ghost animation
//----------------------------------------

$base-color: rgba(221, 221, 221, .644);
$ghost-color: #ECEBEBF1;
$animation-duration: 1500ms;

//----------------------------------------

@mixin background-gradient($color: $base-color) {
  background-image: linear-gradient(90deg, rgba($color, 0.644) 0, $ghost-color 40px, rgba($color, 0.644) 80px);
  background-size: 80vw;
}

@keyframes ghost-lines {
  0%   { background-position: -100px; }
  40%  { background-position: 40vw;   }
  100% { background-position: 60vw;   }
}

@mixin animate-ghost-line {
  animation: ghost-lines $animation-duration infinite linear;
}

@mixin ghost-line($color: rgb(235, 235, 235), $gradient: null) {
  height: 24px;
  border-radius: 4px;
  background-color: rgba($color, .514);
  @if ($gradient) {
    @include background-gradient($gradient);
  } @else {
    @include background-gradient;
  }
}

@mixin hide-text {
  color: transparent !important;

  .mat-icon:before {
    color: transparent;
  }

}