// NavBar button
.navbar-button {
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navbar-icon);
  &.primary {
    color: var(--primary);
  }

  &.shape-round,
  &.shape-circle,
  &.shape-square {
    background-color: #f3f3f6;
  }

  &.shape-round,
  &.shape-circle {
    border-radius: 22px;
  }
  &.shape-square,
  &.shape-circle {
    width: 22px;
    .navbar-button-icon {
      width: 12px;
      height: 12px;
      font-size: 12px;
    }
  }
}

.navbar-button-icon {
  font-family: seeds-icons;
  width: 16px;
  height: 16px;
  font-size: 16px;
}

.navbar-button-icon + .navbar-button-text,
.navbar-button-text + .navbar-button-icon {
  margin-left: 4px;
}
