@include block ('image-file') {

  @include modifier ('light') {
    @include element ('preview-container') {
      padding-left: 0;
      padding-right: 0;

      &::after {
        opacity: 0;
      }
    }
  }

  @include modifier ('dark') {
    @include element ('preview-container') {
      background-color: $color-render-dark;
      padding: s(1);

      &::after {
        opacity: 0;
      }
    }
  }

  @include element ('preview-container') {
    background-color: transparent;
    padding: s(1);
    position: relative;
    transition: background-color $ease-render, padding $ease-render;

    &::after {
      background-image: theme('transparent-background.svg');
      background-size: 128px;
      bottom: 0;
      content: '';
      display: block;
      left: 0;
      opacity: 1;
      position: absolute;
      right: 0;
      top: 0;
      transition: opacity $ease-render, width $ease-render;
    }
  }

  @include element ('preview') {
    background-position: 0 50%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 150px;
    position: relative;
    width: 100%;
    z-index: 1;
  }

  @include element ('name') {
    margin-bottom: em(s(0.75));
  }
}