.scores
  .title
    .icon
      margin-left: .2em
  .score-card
    display: block
    .box
      display: flex
      justify-content: space-between
      align-items: top
      transition: all .1s ease-in-out
      background-color: #fff
      .media, .media-content
        width: 100%
      .score-title
        font-weight: bold
        font-size: 1.4em
        margin: .2em 0 .5em
        display: block
        white-space: nowrap
        overflow: hidden
        text-overflow: ellipsis
      h3
        color: $link
        .icon
          color: #363636
          font-size: .9em
          margin-left: .4em
          opacity: .5
      h3, .score-attributes
        transition: all .1s ease-in-out
      .score-attributes
        color: #444
        font-size: .85em
        line-height: 1.6
        .author-name
          display: inline-block
          vertical-align: top
          margin-bottom: .5em
          margin-top: .2em
          white-space: nowrap
          overflow: hidden
          text-overflow: ellipsis
          width: 100%
          figure
            display: inline-block
            margin-right: 8px
            margin-right: .5rem
          .image
            margin-bottom: 0 !important
            margin-left: 0 !important
          > *
            vertical-align: middle
        nav
          align-items: center
          .control
            font-size: .9rem
            margin-top: .2em
            &:not(:last-child)
              margin-right: 1.2rem
          .icon
            margin-top: .1em
            margin-right: .2em
      &.closed
        background-color: #eaeaea
    &:hover, &:active
      .box
        // box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(50, 115, 220, 0.5)
        background-color: #fafafa
        &.closed
          background-color: #e0e0e0
    &:not(:last-child)
      margin-bottom: 1.5rem

.box.no-score
  box-shadow: none
  background-color: #f4f4f4
  padding: 2.4em
  .media-content
    text-align: center
    color: #888
    font-weight: bold
