@import '../bootstrap'
@import '../theme'

/* Theme */
v-system-bar($material)
  background-color: $material.status-bar.regular
  color: $material.text.secondary

  .v-icon
    color: $material.text.secondary

  &--lights-out
    background-color: $material.status-bar.lights-out !important

theme(v-system-bar, "v-system-bar")

.v-system-bar
  align-items: center
  display: flex
  font-size: $headings.body-2.size
  font-weight: $headings.body-2.weight
  padding: 0 8px

  .v-icon
    font-size: $headings.subheading.size

  &--fixed, &--absolute
    left: 0
    top: 0
    width: 100%
    z-index: 3

  &--fixed
    position: fixed

  &--absolute
    position: absolute

  &--status
    .v-icon
      margin-right: 4px

  &--window
    .v-icon
      font-size: $headings.h6.size
      margin-right: 8px