.header__login:hover
  .header__dropdown-container
    display: block

.header__dropdown-container
  +span-columns(3 of 12)
  +space(top, 2)
  +space(line-height)
  +space(padding)
  +border
  display: none
  position: absolute
  right: 0
  margin: 0
  z-index: 10000
  list-style: none
  background: $white
  border-radius: $border-radius

.header__dropdown
  margin: 0
  list-style: none

.header__dropdown__seperator
  +top-horizontal-rule

//dropdown concerning categories
.header__categories__dropdown__top-level__link--active
  text-decoration: underline

.header__categories__dropdown__top-level__category
  margin: $typecsset-magic-number / 2 0
  +typecsset-font-size($base-font-size)

.header__categories__dropdown__top-level__category--content
  +typecsset-font-size($base-font-size)
  margin-top: $typecsset-magic-number * 2

.header__categories__dropdown__subcategories
  +span-columns(4 of 4)
  +shift(4)
  +space(padding)
  +space(min-height, 19)
  +typecsset-font-size($base-font-size)
  position: absolute
  top: 0
  left: -$gutter
  background: $gray-lightest
  list-style: none
  z-index: 10000
  display: none
  a
    text-decoration: none
    &:hover
      text-decoration: underline