@require '../clock'

artwork-banner = {
  height: 66px
}

.artwork-banner
  height: artwork-banner.height
  display flex
  flex-direction row
  justify-content space-between
  align-items center
  block-margins(10px)
  text-align left
  border-bottom 1px solid gray-lighter-color

  &__logo
    margin-right 10px
    padding-right @margin-right
    border-right 1px solid gray-lighter-color

  &__name
    flex 1
    garamond-size('s-headline')
    > a
      display block
      text-decoration none

  &__jump
    //

@require '../clock'

.artwork-banner
  display flex
  flex-direction row
  justify-content space-between
  align-items flex-end
  block-margins(gutter / 2)
  padding (gutter / 2) 0
  text-align left
  border-bottom 1px solid gray-lighter-color

  &__logo
    margin-right (gutter / 2)
    padding-right @margin-right
    border-right 1px solid gray-lighter-color

  &__name
    position relative
    flex 1
    garamond-size('s-headline')
    margin-bottom -9px // Compensates to align baseline
    white-space nowrap
    overflow hidden

    &:after
      display block
      content ''
      position absolute
      top 0
      right 0
      bottom 0
      width (gutter * 3)
      background-image linear-gradient(left, rgba(white, 0), white)

    > a
      display block
      text-decoration none

  &__countdown
    margin 0 (gutter / 2)
    margin-bottom -2px // Compensates to align baseline

  &__jump
    > a
      white-space nowrap

Align banner to visual baseline
Align banner to visual baseline
