.preview {
  figure {
    height: 100%;
    width: 100px;
  }

  // todo: remove when Spherion has Tailwind
  .button--icon-text {
    margin-left: -5px;
  }
}

@include viewport--l('inversed') {
  figure + .preview--content {
    margin-top: $spacing--m;
  }
}

@include viewport--l {
  .preview {
    flex-direction: row;
    padding: $spacing--l;

    figure {
      min-width: 100px;

      +.preview--content {
        margin: 0 0 0 $spacing--m;
      }
    }

    &--content {
      flex-shrink: 3;
    }

    .button--icon-text:hover .icon {
      animation: none; // play button--icon-text does not pulse for Preview
    }
  }
}
