/// Used to create the shimmer effect of skeleton components
$skeleton-shimmer-duration: duration(slower) * 2;

@mixin skeleton-shimmer {
  // This is a global animation, defined in /src/styles/global/animations.scss
    // stylelint-disable-next-line no-unknown-animations
    animation: polaris-SkeletonShimmerAnimation $skeleton-shimmer-duration
      linear infinite alternate;
  will-change: opacity;
}

@mixin skeleton-content {
  position: relative;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    background-color: color('sky');
    border-radius: border-radius();
  }
}

@mixin skeleton-page-secondary-actions-layout {
  margin-top: spacing(tight);
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
}

@mixin skeleton-page-header-has-secondary-actions {
  padding-top: rem(24px);
  margin-top: 0;
}

@mixin skeleton-page-header-layout {
  padding-bottom: spacing(tight);
}