<commit_before>.annotation
  padding: 20px 0 0
  margin: 0 auto

  span
    margin: 10px 0 0 0

  .subject
    display: flex
    align-items: center
    justify-content: space-between

    @media screen and (max-width: 870px)
      justify-content: space-around

    @media screen and (max-width: 870px)
      flex-wrap: wrap

    .loading-spinner
      width: 100%
      max-width: 930px
      height: 64px
      margin: 241.5px 0
      display: inline-block
      position: absolute
      z-index: 10
      color: $topbar-green
      line-height: 64px

    .guide-btn, .favorite-btn
      font-size: 12px
      line-height: 12px
      color: #5c5c5c
      text-align: center
      margin: 5px 0
      background: transparent
      width: 80px

      &:before
        content: ''
        display: block
        text-align: center
        border-radius: 50%
        width: 56px
        height: 56px
        margin: 0 auto 5px

      &.disabled
        opacity: 0.5

    .guide-btn
      &:before
        background: $blackish url(./assets/guide-icon.svg) no-repeat center center

      @media screen and (max-width: 870px)
        order: 2
        margin: 0 0 25px

    .favorite-btn
      &:before
        background: $blackish url(./assets/fav-icon.svg) no-repeat center center

      &.disabled:before
        background-image: url(./assets/fav-icon-disabled.svg)

      &.disabled[data-tooltip]
        position: relative

        &:hover:after
          content: attr(data-tooltip)
          position: absolute
          color: white
          background-color: $blackish
          padding: 5px
          box-sizing: border-box
          width: 75px
          margin-left: -60px
          margin-top: 15px

      @media screen and (max-width: 870px)
        order: 3
        margin: 0 0 25px

    .guide-open:before
      background-image: url(./assets/cancel-icon.svg)

    .favorited:before
      background-image: url(./assets/fav-icon-filled.svg)

    .preview-imgs
      margin-bottom: 10px
      width: 100%
      max-width: 930px
      height: 100%
      min-height: 410px
      display: block

      figure
        margin: 0
        max-width: 33.33%
        float: left
        transition: all 0.2s

        @media screen and (max-width: 600px)
          min-width: 100%

        img
          padding: 5px
          border: .1px solid transparent //IE fix
          border-radius: 8px
          width: 100%
          max-width: 310px
          box-sizing: border-box
          vertical-align: top

          @media screen and (max-width: 600px)
            max-width: 100%

    .video
      margin: 10px auto

      @media screen and (max-width: 870px)
        width: 98%
        order: 1
        align-self: center

      @media screen and (max-width: 600px)
        margin-bottom: 25px

      video, img // placeholder img
        width: 100%
        max-width: 930px
        border-radius: 8px


.skylight-dialog
  position: fixed
  top: 25%
  left: 10%
  width: 80%
  background-color: $blackish
  border-radius: 8px
  z-index: 100
  padding: 10px
  box-sizing: border-box

  h2
    display: none

  img
    width: 100%
    border-radius: 8px

  .skylight-dialog--close
    cursor: pointer
    position: absolute
    top: 5px
    right: 15px
    font-size: 1.6em


.skylight-dialog__overlay
  position: absolute<commit_msg>Minor style change to zoomed image modal<commit_after>.annotation
  padding: 20px 0 0
  margin: 0 auto

  span
    margin: 10px 0 0 0

  .subject
    display: flex
    align-items: center
    justify-content: space-between

    @media screen and (max-width: 870px)
      justify-content: space-around

    @media screen and (max-width: 870px)
      flex-wrap: wrap

    .loading-spinner
      width: 100%
      max-width: 930px
      height: 64px
      margin: 241.5px 0
      display: inline-block
      position: absolute
      z-index: 10
      color: $topbar-green
      line-height: 64px

    .guide-btn, .favorite-btn
      font-size: 12px
      line-height: 12px
      color: #5c5c5c
      text-align: center
      margin: 5px 0
      background: transparent
      width: 80px

      &:before
        content: ''
        display: block
        text-align: center
        border-radius: 50%
        width: 56px
        height: 56px
        margin: 0 auto 5px

      &.disabled
        opacity: 0.5

    .guide-btn
      &:before
        background: $blackish url(./assets/guide-icon.svg) no-repeat center center

      @media screen and (max-width: 870px)
        order: 2
        margin: 0 0 25px

    .favorite-btn
      &:before
        background: $blackish url(./assets/fav-icon.svg) no-repeat center center

      &.disabled:before
        background-image: url(./assets/fav-icon-disabled.svg)

      &.disabled[data-tooltip]
        position: relative

        &:hover:after
          content: attr(data-tooltip)
          position: absolute
          color: white
          background-color: $blackish
          padding: 5px
          box-sizing: border-box
          width: 75px
          margin-left: -60px
          margin-top: 15px

      @media screen and (max-width: 870px)
        order: 3
        margin: 0 0 25px

    .guide-open:before
      background-image: url(./assets/cancel-icon.svg)

    .favorited:before
      background-image: url(./assets/fav-icon-filled.svg)

    .preview-imgs
      margin-bottom: 10px
      width: 100%
      max-width: 930px
      height: 100%
      min-height: 410px
      display: block

      figure
        margin: 0
        max-width: 33.33%
        float: left
        transition: all 0.2s

        @media screen and (max-width: 600px)
          min-width: 100%

        img
          padding: 5px
          border: .1px solid transparent //IE fix
          border-radius: 8px
          width: 100%
          max-width: 310px
          box-sizing: border-box
          vertical-align: top

          @media screen and (max-width: 600px)
            max-width: 100%

    .video
      margin: 10px auto

      @media screen and (max-width: 870px)
        width: 98%
        order: 1
        align-self: center

      @media screen and (max-width: 600px)
        margin-bottom: 25px

      video, img // placeholder img
        width: 100%
        max-width: 930px
        border-radius: 8px


.skylight-dialog
  position: fixed
  top: 22%
  width: 60%
  left: 20%
  background-color: $blackish
  border-radius: 8px
  z-index: 100
  padding: 10px
  box-sizing: border-box

  h2
    display: none

  img
    width: 100%
    border-radius: 8px

  .skylight-dialog--close
    cursor: pointer
    position: absolute
    top: 5px
    right: 15px
    font-size: 1.6em


.skylight-dialog__overlay
  position: absolute
{'fraction_non_alphanumeric': 0.09208761734465802, 'fraction_numerical': 0.04798092683653703, 'mean_word_length': 1.7075433642597821, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5480944', 'n_tokens_mistral': 2437, 'n_tokens_neox': 2080, 'n_words': 583}