@import "../../app/style";

$previewBorderWidth: 10px;
$plugSize: 90px;

.preview {
  z-index: 4;
  cursor: $cursorInteract, auto;
  min-width: $previewWidth;
  min-height: $previewHeight;
  margin: 5px;
  border: $previewBorderWidth double $fontColor;
  border-image: $border 12 12 11 12;
  border-image-outset: $previewBorderWidth / 2;
  border-image-repeat: stretch stretch;
  background-position: center;
  background-size: $previewWidth $previewHeight;
  background-repeat: no-repeat;
  opacity: 1;
  transition: opacity $transitionDuration $transitionType;

  &--not-loaded {
    background-size: $plugSize;
  }

  &--loading {
    opacity: 0.4;
  }

  &:hover {
    box-shadow: $hoverColor;
  }
}
