codevise/pageflow

.file_thumbnail {
  background-size: cover;

  .pictogram {
    width: 100%;
    height: 100%;
  }

  .pictogram {
    background-color: var(--ui-on-surface-color-light-solid);
    @include background-icon-center($color: var(--ui-on-primary-color), $font-size: 30px);
    @include background-icon-animation(blink);

    &.audio {
      @include note-icon;
    }

    &.other {
      @include fa-cloud-download-icon;
    }

    &.uploading {
      @include up-bold-icon;
    }

    &.fetching_meta_data {
      @include clipboard-icon;
    }

    &.processing,
    &.encoding {
      @include cog-icon;
    }

    &.empty {
      @include picture-icon;
      @include background-icon-animation(none);
    }

    &.action_required {
      @include bell-icon;
    }
  }

  div.pictogram.failed {
    @include attention-icon;
    @include background-icon-animation(none);
  }

  &.ready {
    .pictogram {
      display: none;
      @include background-icon-animation(none);
    }
  }

  &.always_picogram {
    .pictogram {
      display: block;
    }
  }
}

.expandable {
  .file_thumbnail {
    @include background-icon-left($color: var(--ui-on-primary-color), $left: 70%, $top: 85%);
    @include down-open-icon;

    &:before {
      z-index: 1;
      opacity: 0.4;
      text-shadow: var(--ui-on-surface-color) 1px 0 4px;
    }

    &:hover:before {
      opacity: 1;
    }
  }

  .expanded .file_thumbnail {
    @include up-open-icon;
  }
}