.screenshot-viewer

  .screenshot-image,
  .screenshot-description
    margin: 0

  .screenshot-image
    position: relative
    background-color: $black
    padding: 1rem
    text-align: center

    img
      width: 100%

    &:hover
      cursor: pointer

  .screenshot-details
    display: flex
    justify-content: space-around
    align-items: center

    & > *
      flex-shrink: 0
      & > *
        display: inline-block

    [data-screenshot-name]:hover
      cursor: pointer
      color: $blue

  .screenshot-description
    display: flex
    justify-content: stretch
    align-items: center
    color: $white
    background-color: mix($white, $black, 20%)
    padding: 1rem
    border-bottom-right-radius: $radius
    border-bottom-left-radius: $radius

    & > p
      margin: 0 1rem 0 0
      flex-shrink: 0
    & > div
      flex-basis: 100%
      input[type="range"]
        display: block
        width: 100%

    .icon-instruction
      display: inline-flex
      align-items: center
      justify-content: center

      i
        margin: 0 .25rem
