<commit_before>page-height = 30px

.artwork-images
  position relative
  block-margins(10px)
  height 65vh

  &.artwork-images--multiple
    > .artwork-images__images
      bottom page-height

  &__images
    position absolute
    top 0
    right 0
    left 0
    bottom 0

    &__image
      position absolute
      top 0
      right 0
      bottom 0
      left 0
      background-color white

      &[data-state='active']
        z-index 1

      &__placeholder
      &__display
        position absolute
        top 0
        right 0
        bottom 0
        left 0
        background-size contain
        background-repeat no-repeat
        background-position center center

      &__display
        opacity 0
        background-color white
        transition opacity 0.25s
        &[data-state='loaded']
          opacity 1

        > img
          max-width 100%
          max-height 100%
          margin auto

  &__pages
    position absolute
    right 0
    bottom 0
    left 0
    height page-height
    block-margins(10px)
    display flex
    align-items center
    flex-direction row
    justify-content center

    &__page
      display inline-block
      padding 2px
      color gray-color
      cursor pointer
      font-family Verdana, sans-serif
      font-size 20px
      line-height 1
      transition color 0.2s ease-in-out
      user-select none
      &:hover
      &[data-state='active']
        color black

  &__arrows
    position absolute<commit_msg>Temporary adjustments for vertically centering image for the time being<commit_after>page-height = 30px

.artwork-images
  position relative
  block-margins(10px)
  height 65vh

  &.artwork-images--multiple
    > .artwork-images__images
      bottom page-height

  &__images
    position absolute
    top 0
    right 0
    left 0
    bottom 0

    &__image
      position absolute
      top 0
      right 0
      bottom 0
      left 0
      background-color white

      &[data-state='active']
        z-index 1

      &__placeholder
      &__display
        position absolute
        top 0
        right 0
        bottom 0
        left 0

      &__placeholder
        background-size contain
        background-repeat no-repeat
        background-position center center

      &__display
        opacity 0
        background-color white
        transition opacity 0.25s
        &[data-state='loaded']
          opacity 1

        > img
          max-width 100%
          max-height 100%
          margin auto
          position absolute
          top 50%
          left 50%
          transform translate(-50%, -50%)

  &__pages
    position absolute
    right 0
    bottom 0
    left 0
    height page-height
    block-margins(10px)
    display flex
    align-items center
    flex-direction row
    justify-content center

    &__page
      display inline-block
      padding 2px
      color gray-color
      cursor pointer
      font-family Verdana, sans-serif
      font-size 20px
      line-height 1
      transition color 0.2s ease-in-out
      user-select none
      &:hover
      &[data-state='active']
        color black

  &__arrows
    position absolute
{'fraction_non_alphanumeric': 0.05472478523703468, 'fraction_numerical': 0.028635062042634427, 'mean_word_length': 1.6486941870261163, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 7, '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': '2968383', 'n_tokens_mistral': 964, 'n_tokens_neox': 856, 'n_words': 268}