*
  font-family: $font !important
  font-size: $font_size !important

#tabbar
  margin-top: calc(var(--pinned-tabs-area-size) - .15em)
  position: absolute
  border: none !important
  overflow-y: scroll !important
  margin-left: -.5em
  background-color: $base00 !important
  border-right: 1px solid $base01
  box-shadow: none !important

#tabbar-container
  background-color: $base00 !important
  border-right: 1px solid $base01
  box-shadow: none !important

.tab
  background-color: $base01
  color: $base05 !important
  box-shadow: none !important
  margin: 0.125em
  border-radius: 0.125em

  .twisty
    margin-left: -16px
  .highlighter::before
    display: none

  &.pinned
    background-color: $base0E
    color: $base07 !important

    .twisty
      margin-left: -16px

    .label
      margin-left: 7px

  .label
    margin-left: 7px
    margin: 0.25em

  .closebox
    visibility: collapse

  .favicon
    margin-left: 0.25em

  &:hover
    background-color: $base0C !important
    color: $base07 !important

  &.discarded
    background-color: $base00
    color: $base02 !important
    &:hover
      background-color: $base01 !important
      color: $base03 !important

  &.active
    background-color: $base0D
    color: $base07 !important
    &:hover
      background-color: $base0D !important

  &.muted
    opacity: 0.5

  &.sound-playing .label
    background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff)
    background-clip: text
    color: transparent
    animation: rainbow_animation 3s linear infinite
    animation-direction: alternate-reverse
    background-size: 400% 100%

.sound-button::before
  display: none !important

.newtab-button
  display: none

@keyframes rainbow_animation
  0%
    background-position: 0 0

  100%
    background-position: 100% 0