--navbar__children-scheme($scheme-suffix)
  {$class-navbar__logo}
    @extend $scheme--{$scheme-suffix}

  {$class-navbar__link}
    @extend $scheme--{$scheme-suffix} !optional
    &:hover
      @extend $scheme--{$scheme-suffix}-bright !optional
    &:active
      @extend $scheme--{$scheme-suffix}-dark !optional

{$class-navbar}
  unless $var-navbar-padding is false or is-ident($var-navbar-padding)
    +cache('padding'+ $var-navbar-padding)
      padding: $var-navbar-padding

{$class-navbar--black}
  @extend $scheme--black
  --navbar__children-scheme('black')

{$class-navbar--blue}
  @extend $scheme--blue
  --navbar__children-scheme('blue')

{$class-navbar--green}
  @extend $scheme--green
  --navbar__children-scheme('green')

{$class-navbar--gray}
  @extend $scheme--gray
  --navbar__children-scheme('gray')

{$class-navbar--orange}
  @extend $scheme--orange
  --navbar__children-scheme('orange')

{$class-navbar--purple}
  @extend $scheme--purple
  --navbar__children-scheme('purple')

{$class-navbar--red}
  @extend $scheme--red
  --navbar__children-scheme('red')

{$class-navbar--yellow}
  @extend $scheme--yellow
  --navbar__children-scheme('yellow')

{$class-navbar--flex}
  @extend $flex-xs, $flex-align-items-center

{$class-navbar--flex} {$class-navbar__title}
  @extend $align-right-xs, $flex-1

$placeholder-navbar__children
  @extend $no-margin-xs
  line-height: 1
  padding: $var-navbar__children-padding unless $var-navbar__children-padding is false or is-ident($var-navbar__children-padding)

{$class-navbar__link}
  @extend $inline-block-xs, $pointer, $text-decoration-none
  padding: $var-navbar__link-padding unless $var-navbar__link-padding is false or is-ident($var-navbar__link-padding)
  margin: $var-navbar__link-margin unless $var-navbar__link-margin is false or is-ident($var-navbar__link-margin)
  unless $var-navbar__link-transition is false
    +cache('transition'+ $var-navbar__link-transition)
      transition: $var-navbar__link-transition

{$class-navbar__title}
  @extend $placeholder-navbar__children
  padding: $var-navbar__links-padding unless $var-navbar__links-padding is false or is-ident($var-navbar__links-padding)

{$class-navbar__logo}
  @extend $placeholder-navbar__children
  max-height: 100%
  padding: $var-navbar__logo-padding unless $var-navbar__logo-padding is false or is-ident($var-navbar__logo-padding)