.navbar
  display: flex
  align-items: center
  margin: 0
  padding: 5px 10px
  width: 100%
  border-radius: 0 0 5px 5px
  background-color: $white

  &.is-fixed
    position: fixed
    top: 0
    transition: 0.4s

  &.is-hidden
    transform: translate(0, -100%)

  &-items
    display: flex
    flex-wrap: wrap
    align-items: center
    margin: 0
    padding: 0
    list-style: none

  &-item
    display: block
    padding: $padding multiple($padding, 2)
    color: $black
    text-decoration: none
    white-space: nowrap
    font-size: $font

    &:hover,
    &:focus
      color: $blue
    
    &.is-active
      border-bottom: 4px solid $blue
      margin-bottom: -4px
      color: $blue