$content-thumbnail-width: 195px;
$content-thumbnail-height: 140px;

.content-thumbnail {
  display: flex;
  overflow: hidden;
  border: solid 1px $table-border-color;
  border-radius: 4px;
  width: $content-thumbnail-width;
  height: $content-thumbnail-height;

  .content-thumbnail-topbar {
    position: absolute;
    .text-warning, .text-danger {
      position: absolute;
      margin: 8px;
      z-index: 11;
    }
    .content-thumbnail-actions {
      visibility: hidden;
      position: absolute;
      background-color: rgba(0, 0, 0, 0.75);
      width: $content-thumbnail-width - 2px;
      display: flex;
      justify-content: flex-end;
      border-radius: 4px 4px 0px 0px;
      z-index: 10;
      .action-button {
        margin: 8px;
        color: #ffffff;
      }
    }
  }

  .content-thumbnail-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;

    img, audio, video {
      max-width: $content-thumbnail-width;
      max-height: $content-thumbnail-height;
    }
    video::-webkit-media-controls-fullscreen-button {
      display: none;
    }
    .text-content-thumbnail {
      width: 100%;
      height: 100%;
      padding: 5px;
      font-size: 10px;
    }
  }
  &.active, &:hover {
    box-shadow: 0px 0px 5px 1px #66afe9;
    border-color: #337ab7;
    .content-thumbnail-actions {
      visibility: visible;
    }
  }
  &:hover {
    cursor: pointer;
  }
}
