.menu
  background: #fff
  position: relative

.menu-logo
  align-items: center
  display: flex
  justify-content: flex-start
  figure
    align-items: center
    display: flex
    justify-content: center
    width: $logo-width
  img
    display: block
    &:first-child
      height: 24px
      position: relative
      width: 21px
    &:last-child
      height: 18.5px
      margin-bottom: 6px
      margin-left: 9px
      width: 160px

.menu-title
  color: $text-light
  margin-top: 1rem
  padding-right: 1rem
  small
    font-size: 0.8em
    a:hover
      background: $alpha
      color: $alpha-invert

.menu-share
  align-items: center
  display: flex
  position: relative

.menu-share-label
  margin-right: 0.5rem

.menu-share-button
  align-items: center
  display: flex
  height: 2.5rem
  justify-content: center
  position: relative
  width: 2.5rem
  &:before
    +overlay
    background: $background
    border-radius: 5px
    content: ""
    display: block
    height: 100%
    opacity: 0
    transform: scale(1.2)
    transform-origin: center center
    transition-duration: $speed
    transition-property: opacity, transform
    width: 100%
  svg
    height: 1rem
    position: relative
    width: auto
  &:hover:before
    opacity: 1
    transform: scale(1)

.menu-share-nav
  font-weight: $weight-bold
  position: absolute
  right: 1rem
  top: 1rem

.menu-nav
  align-items: stretch
  flex-direction: column
  justify-content: flex-start
  overflow: hidden

.menu-search
  flex-grow: 0
  flex-shrink: 0
  position: relative
  input
    -moz-appearance: none
    -webkit-appearance: none
    border: none
    display: block
    font-family: inherit
    font-size: 0.8rem
    padding: 1.5em
    padding-left: 3.5rem
    width: 100%
    &:focus + .icon
      opacity: 1
  .icon
    left: 2rem
    opacity: 0.3
    pointer-events: none
    position: absolute
    top: 50%

.menu-list
  align-items: stretch
  display: flex
  flex-direction: column
  flex-grow: 1
  flex-shrink: 1
  font-family: $family-monospace
  font-size: 0.7rem
  justify-content: flex-start
  overflow: hidden
  position: relative
  ul
    -webkit-overflow-scrolling: touch
    flex-grow: 1
    overflow: auto
  a
    display: block
    padding: 0.75rem 2rem
    transition: none
    .highlight
      background: $yellow
      color: $yellow-invert
    &:hover,
    &.is-selected
      background: $alpha
      color: $alpha-invert
  &.is-searching
    a
      display: none
      &.is-highlighted,
      &.is-selected,
        display: block

.menu-list-shadow
  display: block
  left: 0
  opacity: 0
  pointer-events: none
  position: absolute
  right: 0
  &.is-top
    background: linear-gradient(rgba(#000, 0.1), rgba(#000, 0))
    height: 1rem
    top: 0
    transform-origin: center top
  &.is-bottom
    background: linear-gradient(rgba(#000, 0), rgba(#000, 0.1))
    bottom: 0
    height: 1rem
    opacity: 1
    transform: scaleY(1)
    transform-origin: center bottom

.menu-close
  align-items: center
  background: $link
  color: $link-invert
  display: flex
  flex-grow: 0
  flex-shrink: 0
  font-weight: $weight-bold
  justify-content: center
  padding: 1rem
  text-align: center
  strong
    color: $link-invert
  .icon
    margin-right: 0.25rem
    margin-top: 1px

.menu-hello
  background: #fff
  min-height: 218px

#huggingFace
  background: #fff
  color: $text-strong
  display: none
  font-size: 16px
  line-height: 1.4
  padding: 1.5rem
  img
    height: 24px
    margin-top: -4px
    vertical-align: middle
    width: 24px
  strong
    position: relative
    &:before
      background: hsl(171, 100%, 81%)
      bottom: 0
      content: ""
      height: 2px
      left: 0
      position: absolute
      right: 0
  p + p
    margin-top: 0.5em

#carbon
  display: block
  font-size: 14px
  line-height: 1.2
  min-height: 218px

#carbonads
  a,
  img,
  span
    display: block
    max-width: 240px
  .carbon-wrap
    a:first-child
      height: calc(100px + 1rem)
      padding: 1rem 1rem 0
    a:last-child
      padding: 0.5rem 1rem 0
  .carbon-poweredby
    color: $text-light
    padding: 0.5rem 1rem 1rem
  &:hover
    .carbon-wrap a:last-child
      text-decoration: underline

+mobile
  .menu-header
    padding: 2rem
    padding-bottom: 0
  .menu-share
    background: #fff
    bottom: 0
    box-shadow: 0 0 1rem rgba(#000, 0.2)
    left: 0
    padding: 0.5rem 1rem
    position: fixed
    right: 0
  .menu-nav
    +overlay
    background: #fff
    display: none
    position: fixed
    &.is-active
      display: flex
  #huggingFace
    padding: 2rem
  #carbonads
    .carbon-wrap a:first-child,
    .carbon-wrap a:last-child,
    .carbon-poweredby
      padding-left: 2rem
      padding-right: 2rem

+desktop
  .menu
    align-items: stretch
    background: #fff
    bottom: 0
    box-shadow: $shadow
    display: flex
    flex-direction: column
    justify-content: flex-start
    left: 0
    min-height: 100vh
    position: fixed
    top: 0
    width: $menu-width
  .menu-header
    flex-grow: 0
    flex-shrink: 0
    padding: 2rem
    padding-bottom: 1.5rem
  .menu-share
    margin-top: 0.5rem
  .menu-share-nav
    display: none
  .menu-nav
    border-top: 1px solid $border
    display: flex
    flex-grow: 1
    flex-shrink: 1
  .menu-list
    a
      padding: 0.5rem 2rem
  .menu-hello
    background: #fff
    flex-grow: 0
    flex-shrink: 0
  .menu-close
    display: none