@use './variables' as skeleton-variables;

@keyframes mdc-skeleton-loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

@mixin color() {
  background: linear-gradient(
    90deg,
    skeleton-variables.$color 25%,
    skeleton-variables.$to-color 37%,
    skeleton-variables.$color 63%
  );
  background-size: 400% 100%;
  animation: mdc-skeleton-loading 1.4s ease infinite;
}

@mixin avatar-size($size) {
  width: $size;
  height: $size;
  line-height: $size;
}