@import '@angular/material';

// Skeleton mixin
// Use theme to manage colors on Skeleton component
@mixin mic-skeleton-override($theme) {
  $is-dark: map-get($theme, is-dark);
  $background: map-get($theme, background);

  $backgroundColor: rgb(239, 241, 246);
  $imageColor: white;
  @if $is-dark {
    $backgroundColor: map-get($background, sub-menu);
    $imageColor: rgba(0, 0, 0, 0.8);
  }

  .skeleton-loader {
    background: $backgroundColor no-repeat;

    &.image:after {
      color: $imageColor;
    }

    &.progress:before {
      @if $is-dark {
        background-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.8), transparent) !important;
      }
    }
  }
}
