@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

    .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
    progress
      width: 100%

.progress.is-tiny
  height: .25rem

// cover images
.image.is-256x256
  width: 256px
  height: 256px

  .missing-cover
    display: block

// 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

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

// duh
.song-list
  .song.is-playing
    background-color: $light !important

// 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

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

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

        &:first-child
          margin-left: 0

    .hero + .section
      padding-top: 0
      padding-bottom: 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

.no-wrap