.c-topbar-wrap
  position: relative
  height: $topbarHeight
  width: 100%

.c-topbar
  position: fixed
  display: flex
  align-items: center
  justify-content: center
  width: 100%
  height: $topbarHeight
  z-index: 99999999999999999999
  padding: 0 $unit * 4 // 0 16

.c-topbar__selection
  position: relative
  height: $topbarHeight
  width: 100%

  span
    +absolute-full
    font-weight: $fontWeightBold
    line-height: $topbarHeight
    white-space: nowrap
    overflow: hidden
    text-overflow: ellipsis
    animation: slideInLeft $transitionNormal ease

.c-topbar__controls
  display: flex
  align-items: center
  justify-content: flex-end
  height: $topbarHeight

.c-topbar__right
  position: absolute
  top: 0
  right: 0
  display: flex
  align-items: center
  justify-content: flex-end
  height: $topbarHeight

.c-topbar__control
  display: flex

.c-topbar__zoom-status
  display: flex
  align-items: center
  justify-content: center
  font-size: $fontSizeSm
  line-height: $buttonSize
  width: $buttonSize * 2
  height: $buttonSizeLg

  ::selection
    background: none

  &:hover
    &:after
      +tooltip
      content: 'Zoom'

.c-topbar__button-bb
  position: absolute
  top: 100%
  height: 1px
  width: 100%

.c-topbar__button-bg
  +absolute-full
  visibility: hidden
  transform-origin: center top

.c-topbar__button
  position: relative
  display: flex
  align-items: center
  justify-content: center
  width: $buttonSizeLg
  height: $buttonSizeLg
  cursor: pointer
  border-radius: $buttonBR

  svg
    z-index: 1

  &:hover

    .c-topbar__button-bg
      visibility: visible
      animation: growInHeight $transitionNormal ease

    .c-topbar__button-bb
      animation: popIn $transitionSlow ease-in
      background: $highlightColor

.c-topbar__button--zoom-in
  border-radius: 0 $buttonBR $buttonBR 0

  &:hover
    &:after
      +tooltip
      content: 'Zoom In'

.c-topbar__button--zoom-out
  border-radius: $buttonBR 0 0 $buttonBR

  &:hover
    &:after
      +tooltip
      content: 'Zoom Out'

.c-topbar__button--refresh
  &:hover
    &:after
      +tooltip
      content: 'Center Canvas'

.c-topbar__button--zoom-reset
  &:hover
    &:after
      +tooltip
      content: 'Reset Zoom'

.c-topbar__button--save
  &:hover
    &:after
      +tooltip
      right: 0
      content: 'Export Spec'

.c-topbar__button--theme-dark,
.c-topbar__button--theme-light
  &:hover
    &:after
      +tooltip
      right: 0

.c-topbar__button--theme-dark
  &:hover
    &:after
      content: 'Enable Light Theme'

.c-topbar__button--theme-light
  &:hover
    &:after
      content: 'Enable Dark Theme'