.bui-navbar {
  --width: var(--bui-navbar-width, 100%);
  --height: var(--bui-navbar-height, 45px);
  --padding: var(--bui-navbar-padding, 0 8px);
  --icon-size: var(--bui-navbar-icon-size, 24px);
  --icon-font-size: var(--bui-navbar-icon-font-size, var(--bui-title-size-3));
  --background-color: var(--bui-navbar-background-color, var(--bui-color-white));
  --border-bottom: var(--bui-navbar-border-bottom, none);
  --z-index: var(--bui-navbar-z-index, auto);
  --title-max-width: var(--bui-navbar-title-max-width, 60%);
  position: relative;
  width: var(--width);
  height: var(--height);
  box-sizing: border-box;
  padding: var(--padding);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--background-color);
  border-bottom: var(--border-bottom);
  user-select: none;
  z-index: var(--z-index);
  font-family: var(--bui-font-family);
}
.bui-navbar-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
.bui-navbar-title {
  max-width: var(--title-max-width);
  padding: var(--padding);
  font-size: var(--bui-title-size-2);
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bui-navbar-left,
.bui-navbar-right {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: var(--icon-font-size);
}
.bui-navbar-left {
  justify-content: flex-start;
  text-align: left;
}
.bui-navbar-right {
  justify-content: flex-end;
  text-align: right;
  align-self: stretch;
}
.bui-navbar-icon {
  font-size: var(--icon-size);
}
.bui-navbar-placeholder {
  width: 100%;
}