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

// Used by both Thumbnail and SkeletonThumbnail
$small-thumbnail-size: rem(40px);
$medium-thumbnail-size: rem(60px);
$large-thumbnail-size: rem(80px);

$thumbnail-sizes: (
  small: $small-thumbnail-size,
  medium: $medium-thumbnail-size,
  large: $large-thumbnail-size,
);

@function thumbnail-size($size) {
  @return map-get($thumbnail-sizes, $size);
}

@mixin skeleton-shimmer {
  // This is a global animation, defined in /src/components/AppProvider/AppProvider.scss
  // See that file for why this is referenced as a custom property instead of
  // by name
  animation: var(--polaris-animation-skeleton-shimmer)
    $skeleton-shimmer-duration linear infinite alternate;
  will-change: opacity;

  @media (prefers-reduced-motion) {
    animation: none;
  }
}

@mixin skeleton-content {
  position: relative;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    background-color: var(--p-surface-neutral);
    border-radius: border-radius();

    @media screen and (-ms-high-contrast: active) {
      background-color: ms-high-contrast-color('disabled-text');
    }
  }
}

@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-layout {
  padding-bottom: spacing(tight);
}