@import "elements"
@import "mixins/all"

@import "layout/top_bar"

=finder
  padding-top: 1em
  padding-right: 1em
  padding-left: 1em
  width: 100%
  form
    padding: 0
    margin-bottom: 1em
    input[type=search]
      width: 100%
      height: 2em 
      padding-left: 0.5em
      padding-right: 0.5em
    button[type=submit]
      display: none
      position: absolute
      top: 0px
      right: 0
      height: 2em


=button_sheet
  & > *:not(:last-child)
    +button_hmargin

%clear-top_bar
  margin-top: 5em

body
  @extend %clear-top_bar


/////


#top_menu
  @extend %top_bar-position
  @extend %top_bar-size
  @extend %top_bar-layout

  & > div
    display: inline-block

    &.title
      @extend %top_bar-title

    &.reload
      @extend %top_bar-reload
      +material(1)

    &.container
      @extend %top_bar-button_container

    &.find
      +finder

    &.favourites
      ul.entities, ul.entity_lists
        & > li
          width: 100%
          display: block

#top_menu

  & > div
    display: inline-block
    
@media #{$not-very-small}
  +material(2)

@media #{$only-very-small}
  #top_menu
    dt.next.entities 
      +entity_icon
    dt.next.lists
      +list_icon
    dt.next.maps
      +maps_icon
    dt.next.new
      +new_icon