.score-header
  margin-bottom: .4rem
  .private-description
    font-size: .9em
    opacity: .5
    .icon
      margin-right: .5em
  .title
    font-size: 1.8em
    margin-bottom: 1.2rem
  .button
    display: block
    margin-bottom: 1rem

.author
  display: flex
  align-items: center
  margin-bottom: .75em
  line-height: 1.3
  a
    color: #444
    &:hover
      color: #666
  figure
    margin-right: .8rem
  .created-at, .updated-at
    font-size: .8em
    color: #888
  .updated-at
    margin-left: .6em
    &:before
      content: "("
    &:after
      content: ")"

.others
  display: flex
  align-items: center
  margin: .5em 0
  color: #666
  height: 2.25rem
  .separator
    color: #eee
    margin: 0 1.2em
    &:last-of-type
      margin-right: .4em
  .icon
    color: #666
    margin-right: .4em
  .button
    margin-bottom: 0
    margin-left: .4em
    color: #666
    &:active
      border-color: $link
    &:disabled
      &, .icon
        color: #666 !important

@media screen and (max-width: $tablet - 1px)
  .score-header
    flex-direction: column
    .shared-buttons
      margin: 1.5em 0 0
      .shared-button
        font-size: 1.5em
        margin-bottom: 1em
        .fa-stack
          .fa:last-child
            left: .1em
      &.as-show
        .shared-button
          margin-top: .5em
          &:not(:last-child)
            margin-right: 1.2em
  .author
    figure.image
      width: 52px
      height: 52px
    p
      margin-bottom: .2em
    .created-at, .updated-at
      display: block
    .updated-at
      margin-left: 0
      &:before
        content: ""
      &:after
        content: ""
