@import "../../node_modules/bulma/bulma"
@import "../../node_modules/open-iconic/font/css/open-iconic.scss"

// area holding content & side navi
#app
  main
    margin-bottom: 0

// big loading spinner
.app-loading
  display: flex
  justify-content: center
  align-items: center
  height: 100vh
  font-size: 4.8rem
  color: $grey-light
  .loader
    +loader

// navi on the left side
.sidebar
  min-height: 100vh
  background: $dark
  a
    color: $light

.has-navbar-fixed-bottom .sidebar
  // 2.5 = 3.25 ($navbar-height) - 0.75 ($padding)
  min-height: calc(100vh - 2.5rem)

// bottom bar
.audio-player
  .navbar-menu
    color: $light
    background: $dark
    align-items: center

  .idle-notification
    color: $light

  .audio-interaction
    flex-grow: 1

    .media-left
      margin-right: 0

    .level-left
      flex-grow: 1
      flex-shrink: 0

    .level-right
      display: flex

      .button-group
        margin: 0 .5rem

        + .button-group
          margin-left: 0

      =tablet
        flex-grow: 0
        flex-shrink: 1
        padding-left: .5rem
        padding-right: .5rem

  .media
    flex-grow: 1
    align-items: center

.current-song-info
  display: flex
  align-items: center

  .current-name,
  .current-progress
    padding: .5rem

  .current-name
    width: 30%
    font-size: .8rem
    white-space: nowrap
    text-overflow: ellipsis
    overflow: hidden

  .current-progress
    flex-grow: 1
    position: relative

    .buffered-part
      position: absolute
      top: .5rem
      left: calc(.5rem + 5px)
      height: 1rem
      cursor: pointer

    .current-progress-canvas
      display: block
      height: 1rem
      width: 100%

// preview card for album or artist listings
.preview-card
  .card-content > div,
  .title,
  .subtitle
    overflow: hidden
    white-space: nowrap
    text-overflow: ellipsis

  .image.is-256x256
    width: auto
    height: auto
    max-width: 256px
    max-height: 256px
    margin: 0

.image
  .missing-cover
    display: block
    max-width: 100%

  &.is-48x48 .missing-cover
    width: 48px
    height: 48px

  &.is-128x128 .missing-cover
    width: 128px
    height: 128px

  &.is-256x256 .missing-cover
    width: 256px
    height: 256px

// occurs in album detail view
.table
  .grow
    width: 100%

// duh
.song-list
  .song
    .duration
      padding-left: .5rem
      color: $grey-light

    .is-playing
      background-color: $light !important
      font-weight: bold

// occurs on many pages at the top to show details
.hero
  .media-content
    align-self: center

  &.is-small + .section
    padding-top: 0

// floating notifications
.notifications:not(:empty)
  @extend .container
  z-index: 100
  position: fixed
  left: 0
  right: 0
  padding-top: 3.2rem

// loading indicator
@keyframes you-spin-my-head-right-round
  from
    transform: rotate(0deg)
    transform-origin: 49% 50%

  to
    transform: rotate(359deg)
    transform-origin: 49% 50%

.loading-spinner
  .icon
    animation: 1s infinite you-spin-my-head-right-round


// route specific styling
.search
  .content .section
    padding: 1.5rem 0

  .preview-card
    .card-content
      padding: 0.375rem 0.75rem 0.75rem

    .missing-cover
      display: inline-block

.album.detail
  .collection-info
    list-style: none

    li
      display: inline-block
      margin-left: 0.75rem

      &:first-child
        margin-left: 0


  .song-list
    counter-reset: track

    tbody
      tr
        counter-increment: track

      td:first-child > div::before
        color: $grey-light
        content: counter(track)
        display: inline
        padding-right: 0.375rem