@import "../css/colors"
@import "../css/vars"

:local(.navbarItem)
  position: relative
  background-color: $lightGray
  height: 80px
  align-items: center
  display: flex

  button.btn-iconbtn, button.btn
    border: none
    border-left: solid 1px $white

    &:last-child
      border-right: none

    &:first-child:not(:last-child)
      border-left: none

  button.btn-menutogglebtn-open
    border: solid 1px $lightGray
    border-bottom: none

    &:last-child, &:first-child
      border-right: solid 1px $lightGray

:local(.navbarItem.blue)
  background-color: $blue
  color: $white

:local(.navbarItem.red)
  background-color: $red
  color: $white

:local(.navbarItem.white)
  background-color: $white
  color: $textGray

:local(.navbarItem.border)
  height: 58px
  border: solid 1px $backgroundGray

:local(.navbarItem.grow)
  flex-grow: 9

:local(.navbarItem.separate)
  margin-left: 10px

:local(.navbarItem.padding)
  padding: 0 20px

:local(.navbarItem.smSeparate)
  margin-left: 0

@media screen and (min-width: $small)
  :local(.navbarItem.smSeparate)
    margin-left: 10px