/* This is for the content list sidebar, that is use by the document and media viewers */
#content-list {
  --thumb-height: 75px;

  .media-thumb,
  .file-thumb {
    cursor: pointer;
    list-style-type: none;
    border: 1px solid var(--border-color);
    margin-bottom: 0.5rem;

    &.active {
      box-shadow: 0px 0px 3px 2px var(--active-media-thumb-color);
    }

    .default-thumbnail-icon {
      background-color: black;
      display: inline-block;
      float: left;
      height: var(--thumb-height);
      mask-repeat: no-repeat;
      mask-size: 100%;
      width: 4.6rem;
      vertical-align: top;
    }

    .video-thumbnail-icon {
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='MuiSvgIcon-root VideoFileSharp' focusable='false' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H4v20h16V8zm-1 7V3.5L18.5 9zm1 5 2-1.06v4.12L14 16v2H8v-6h6z'%3E%3C/path%3E%3C/svg%3E");
    }

    .audio-thumbnail-icon {
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='MuiSvgIcon-root AudioFileSharp' focusable='false' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H4v20h16V8zm2 11h-3v3.75c0 1.24-1.01 2.25-2.25 2.25S8.5 17.99 8.5 16.75s1.01-2.25 2.25-2.25c.46 0 .89.14 1.25.38V11h4zm-3-4V3.5L18.5 9z'%3E%3C/path%3E%3C/svg%3E");
    }

    .image-thumbnail-icon {
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='MuiSvgIcon-root ImageSharp' focusable='false' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath d='M21 21V3H3v18zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5z'%3E%3C/path%3E%3C/svg%3E");
    }

    .square-icon {
      float: left;
    }

    .sul-embed-thumb-stanford-only {
      background: url("/assets/stanford_s-ff2b5dee.svg") no-repeat;
      background-position: bottom left;
      padding-right: 20px;
      &.text {
        height: calc(
          100% - 0.75rem
        ); /* positions .sul-embed-thumb-stanford-only */
      }
    }

    .text {
      display: inline-block;
      margin-top: 0.25rem;
      vertical-align: top;
      width: 130px;
      text-align: left;
    }
  }

  .media-thumb {
    height: var(--thumb-height);
    text-align: center;
  }

  .file-thumb {
    padding: 0.5rem;
    svg {
      vertical-align: middle;
    }
  }
}