=block-magic-glass
  background: transparentize(tint($color-one, 73), 1 - 0.618)
  border: $tile solid transparentize(tint($color-one, 73), 1 - 0.618)

$top_bar-menu-height: 400px
$top_bar-menu-width: 500px

=top_bar-rail_menus
  border-top: 1px solid $subtle_border
  +shifting(right)

  position: absolute
  top: $top_menu_height
  left: 0
  width: 100%
  @media #{$only-large}
    margin-left: 30%
    width: 70%
  @media #{$only-very-large}
    margin-left: 50%
    width: 50%

  +block-magic-glass
  & > dl
    width: 100%
    & > dd
      max-height: $top_bar-menu-height


=top_bar-insitu_menus
  margin-left: 2 * $tile
  margin-right: 2 * $tile

  transform: rotate(360deg)

  &.reload, &.find
    +material(1)

  &.find
    +shifting(right)
    position: absolute
    top: $top_menu_height

  &.favourites
    float: left
    margin-left: calc(15% + #{ 2 * $indent})
    & > dl > dd 
      left: 0

  &.user
    float: right
    margin-right: 10em
    flex-direction: row-reverse
    & > dl > dd 
      position: absolute
      right: 0

  & > dl
    z-index: 12
    overflow: visible
    display: flex

    & > dt 
      z-index: 14

    & > dd 
      overflow-y: auto
      overflow-x: hidden
      position: absolute
      top: 48px
      width: $top_bar-menu-width
      +block-magic-glass
      margin: 0
      z-index: 13
      +shifting-up
      max-height: $top_bar-menu-height


=top_bar-menus
  &.find
    @extend %background-subtle

  @media #{$not-very-large}
    +top_bar-rail_menus
  @media #{$only-very-large}
    +top_bar-insitu_menus

  & > dl
    @extend %tab_menu-layout-horizontal
    & > dt 
      @extend %hmargin-none
      @extend %background-subtle
      @extend %tab

    & > dd 
      background: white
      padding: 0px
      +inset_bottom_shadow(1)
      > dl
        @extend %accordion_menu

#top_menu
  > .favourites, > .user, > .find
    +top_bar-menus