@import '../../layouts/variables.styl'

header
  position: sticky
  text-bold()
  top: $default-padding * -1

nav
  background-color: $black
  color: $white
  padding-top: $default-padding
  a
    color: inherit
    outline: none
    text-decoration: none
    &.placard-link
      img
        height: 2.65em
        width: 5.3em
    &:not(.placard-link)
      inline-block()
      padding: $default-padding
      &.active
        background-color: $primary-red

      &:active
      &:hover
      &:focus
        background-color: $secondary-red

  ol
    background-color: $black
    white-space: normal
    &.no-overflow-x
      overflow-x: hidden
      white-space: nowrap
    li
      inline-block()
      ol
        left: 3em
        position: absolute
        right: 3em
        text-align: center

  button
    background-color: $black
    border: none
    color: inherit
    cursor: pointer
    font-size: 2em
    inline-block()
    line-height: 1.575em
    padding: 0 0.5em
    outline: none
    &:hover
      background-color: $white
      color: $black

.hide-children
  ol
    display: none
  &:hover ol
      display: block

@import '../../layouts/variables.styl'

header
  position: sticky
  text-bold()
  top: $default-padding * -1

nav
  background-color: $black
  color: $white
  padding-top: $default-padding
  a
    color: inherit
    outline: none
    text-decoration: none
    &.placard-link
      img
        height: 2.65em
        width: 5.3em
    &:not(.placard-link)
      inline-block()
      padding: $default-padding
      &.active
        background-color: $primary-red

      &:active
      &:hover
      &:focus
        background-color: $secondary-red

  ol
    background-color: $black
    white-space: normal
    &.no-overflow-x
      overflow-x: hidden
      white-space: nowrap
    li
      inline-block()
      ol
        box-shadow: inset 0px -3px 10px 0px $primary-grey
        left: 3em
        max-height: 500%
        overflow-y: auto
        position: absolute
        right: 3em
        text-align: center

  button
    background-color: $black
    border: none
    color: inherit
    cursor: pointer
    font-size: 2em
    inline-block()
    line-height: 1.575em
    padding: 0 0.5em
    outline: none
    &:hover
      background-color: $white
      color: $black

.hide-children
  ol
    display: none
  &:hover ol
      display: block

Set maximum height of the countries list to avoid missing countries in small divices. Guarantee that the list is scrollable.
Set maximum height of the countries list to avoid missing countries in small divices. Guarantee that the list is scrollable.
