+add-selector('breadcrumb') {
  _.current_selector = 'breadcrumb'

  background-color: $Colors.theme.muted + 25%
  padding: $Sizes.padding.medium
  border-radius: $Sizes.round.small

  > * {
    text-decoration: none
    color: $Colors.theme.primary
    display: inline

    &:not(:first-child) {
      margin-left: $Sizes.margin.medium;

      &::before {
        content: $Others.nav.breadcrumb_symbol;
        margin-right: $Sizes.margin.medium;
        color: $Colors.theme.muted;
      }
    }

    &:last-child {
      color: $Colors.theme.muted;
    }
  }

  for $color-name, $color-value in $Colors.all {
    add-value($color-name, 'color-background-' + $color-name)
  }
}


+add-selector('navbar', '', 'color-background-primary') {
  _.current_selector = 'navbar'

  padding: $Sizes.margin.large 0
  font-size: round($Font.size.default * 1.2)

  +add-value('fixed') {
    position: fixed;
    top: 0
    left: 0
    right: 0
    z-index: 9999
  }

  +add-selector('row') {
    justify-content: space-between
    flex-wrap: nowrap
    margin: 0 $Sizes.margin.large

    +add-selector('brand') {
      font-weight: bold;
      font-size: $Font.size.default * 1.35
    }

    > div {
      width: 100%

      &:first-child {
        text-align: left;

        :not(:first-child) {
          margin-left: $Sizes.margin.medium;
        }
      }

      &:last-child {
        text-align: right;

        &:first-child {
          text-align: left;
        }

        :not(:last-child) {
          margin-right: $Sizes.margin.medium;
        }
      }

      * {
        display: inline;
        color: $Colors.theme.light;
      }

      a {
        color: $Colors.theme.light;
        text-decoration: none;
      }
    }
  }

  for $color-name, $color-value in $Colors.all {
    add-value($color-name, 'color-background-' + $color-name)
  }

  @media screen and (max-width: $Grid.breakpoints[sm]) {
    flex-wrap: wrap
    padding: 0

    > * {
      width: 100%

      padding: 0;

      &:first-child,
      &:last-child {
        margin: 0 !important;

        > * {
          margin: 0 !important;
        }
      }

      > * {
        margin: 0;
        display: block !important;
        text-align: center;
      }
    }
  }
}