.sui-a-thumbnail {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: $sui-border-radius-relative-md;
  font-size: $sui-font-size-sm;
  line-height: 1;
  color: $sui-color-text-light;
  text-align: center;
  background: $sui-color-brand-denim-300;

  @include suiThumbnailSize($sui-size-md);

  img {
    z-index: 2;
    position: relative;
    background: $sui-color-brand-denim-200;
  }

  &.as--xxs {
    @include suiThumbnailSize($sui-size-xxs);
  }

  &.as--xs {
    @include suiThumbnailSize($sui-size-xs);
  }

  &.as--sm {
    @include suiThumbnailSize($sui-size-sm);
  }

  &.as--lg {
    @include suiThumbnailSize($sui-size-lg);
  }

  &.as--xl {
    @include suiThumbnailSize($sui-size-xl);
  }

  &.as--xxl {
    @include suiThumbnailSize($sui-size-xxl);
  }

  &.as--init-loader {
    @include suiLoader();
  }

  &.as--shadow-100 {
    box-shadow: $sui-shadow-100;
  }

  &.as--shadow-200 {
    box-shadow: $sui-shadow-200;
  }

  &.as--shadow-300 {
    box-shadow: $sui-shadow-300;
  }

  &.as--shadow-400 {
    box-shadow: $sui-shadow-400;
  }

  &.as--shadow-500 {
    box-shadow: $sui-shadow-500;
  }

  &.as--shadow-600 {
    box-shadow: $sui-shadow-600;
  }
}