$default-padding = 1em
$primary-red = #EF3E45
$secondary-red = #D4373E
$black = #000
$white = #FFF

header
  position: sticky
  top: $default-padding * -1

nav
  background-color: $black
  color: $white
  padding-top: $default-padding
  a:not(.default)
    color: inherit
    display: inline-block
    outline: none
    padding: $default-padding
    text-decoration: none
    &.active
      background-color: $primary-red

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

  ol
    background-color: $black
    margin-block-end: 0
    margin-block-start: 0
    padding-inline-start: 0
    white-space: normal
    &.no-overflow-x
      overflow-x: hidden
      white-space: nowrap
    li
      display: inline-block
      ol
        padding-left: 0
        position: absolute

  button
    background-color: inherit
    border: none
    color: inherit
    cursor: pointer
    display: inline-block
    font-size: 2em
    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

$default-padding = 1em
$primary-red = #EF3E45
$secondary-red = #D4373E
$black = #000
$white = #FFF

header
  position: sticky
  top: $default-padding * -1

nav
  background-color: $black
  color: $white
  padding-top: $default-padding
  a:not(.default)
    color: inherit
    display: inline-block
    outline: none
    padding: $default-padding
    text-decoration: none
    &.active
      background-color: $primary-red

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

  ol
    background-color: $black
    margin-block-end: 0
    margin-block-start: 0
    padding-inline-start: 0
    white-space: normal
    &.no-overflow-x
      overflow-x: hidden
      white-space: nowrap
    li
      display: inline-block
      ol
        left: 3em
        position: absolute
        right: 3em
        text-align: center

  button
    background-color: inherit
    border: none
    color: inherit
    cursor: pointer
    display: inline-block
    font-size: 2em
    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

Extend the width of the countries' containers to avoid positioning problems in small viewports.
Extend the width of the countries' containers to avoid positioning problems in small viewports.
