.video-player {
  overflow: hidden;
  position: relative;
  background: $base-shadow-color;
  max-width: 100%;
  border-radius: 4px;

  &:focus {
    outline: 0;
  }

  video {
    z-index: 1;

    @include max-size(100vw, 80vh);
  }

  &.fullscreen {
    margin: 0;

    @include size(100% !important);

    video {
      @include max-size(100% !important);
      @include size(100% !important);
    }
  }

  &.inactive {

    video,
    .video-player__controls {
      visibility: hidden;
    }
  }

  &__spoiler {
    display: none;
    z-index: 4;
    border: 0;
    background: $base-overlay-background;
    color: $darker-text-color;
    transition: none;
    pointer-events: none;

    @include abs-position(0, auto, auto, 0);
    @include size(100%);

    &.active {
      display: block;
      pointer-events: auto;

      &:hover,
      &:active,
      &:focus {
        color: lighten($darker-text-color, 7%);
      }
    }

    &__title {
      display: block;
      font-size: 14px;
    }

    &__subtitle {
      display: block;

      @include text-sizing(11px, 500);
    }
  }
}