.preview {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.preview__select {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
  gap: 1em;

  .preview__select-buttons {
    display: flex;
    gap: 1em;
    padding: 1em;
    flex-wrap: wrap;
  }
}

.preview__select-warning {
  color: $white;
  padding-top: 1em;
  font-weight: 900;
}

.preview__image-wrapper,
.preview__video-wrapper,
.preview__iframe-wrapper {
  display: contents;
}

.preview__loading {
  margin-top: -7px;
  margin-left: -7px;

  @include loading(14px);
  @include absolute(50%, auto, auto, 50%);
}

.preview__image,
.preview__video {
  display: block;
  max-width: 100%;
  max-height: 100%;
  user-select: none;

  &.preview--hidden {
    position: absolute;
    visibility: hidden;
  }
}

.preview__audio {
  &.preview--hidden {
    position: absolute;
    visibility: hidden;
  }
}

.preview__iframe {
  width: 100%;
  height: 100%;
  border: none;

  &.preview--hidden {
    position: absolute;
    visibility: hidden;
  }
}