@use '@/assets/styles/variables' as *;

.app-topbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: $topbar-height;
  background: $color-surface-card;
  border-bottom: 1px solid $color-border;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 $space-md;
  z-index: $z-topbar;

  &__right {
    display: flex;
    align-items: center;
    gap: $space-xs;
  }

  &__notify-btn {
    position: relative;
  }

  &__user-btn {
    display: flex;
    align-items: center;
    gap: $space-sm;
  }

  &__username {
    font-size: $font-size-sm;
    @media (max-width: $bp-tablet) {
      display: none;
    }
  }
}
