menu.sass

.menu
  background: #fff
  position: relative

.menu-header
  padding: 1rem 1rem 0

.menu-logo
  align-items: center
  display: flex
  justify-content: center
  figure
    align-items: center
    display: flex
    justify-content: center
    width: $logo-width
  img
    display: block

.menu-logo-icon
  height: 24px
  position: relative
  width: 21px

.menu-logo-type
  height: 18.5px
  margin-bottom: 6px
  margin-left: 9px
  width: 160px

.menu-collections
  padding: 1rem
  ul
    align-items: flex-start
    display: flex
    flex-wrap: wrap

.menu-collection-link
  border-radius: 2px
  display: block
  padding: 0 6px
  &:hover
    background: $alpha
    color: $alpha-invert

.menu-collection-link--active
  background: $alpha
  color: $alpha-invert

.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: 1em
    padding-left: 2.5rem
    width: 100%
    &:focus + .icon
      opacity: 1
  .icon
    left: 1rem
    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-size: 0.8rem
  justify-content: flex-start
  overflow: hidden
  position: relative
  ul
    -webkit-overflow-scrolling: touch
    flex-grow: 1
    overflow: auto
  .menu-link
    display: block
    padding: 0.75rem 2rem
    transition: none
  &.is-searching
    .menu-item
      display: none
      &.is-highlighted,
      &.is-selected,
        display: block

.menu-item
  .highlight
    background: $yellow
    color: $yellow-invert
  &:hover,
  &.is-selected
    background: $alpha
    color: $alpha-invert
    .menu-item-name
      color: $alpha-invert

.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
  padding-bottom: 1rem
  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
    margin-bottom: 0.5em

#carbon
  display: none
  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
    background: $background

#placeholder
  display: block
  font-size: 14px
  line-height: 1.2

.placeholder-image
  height: calc(100px + 1rem)
  padding: 1rem 1rem 0
  div
    background: $background
    height: 100px
    width: 150px

.placeholder-content
  padding: 0.5rem 1rem 0
  div
    background: $background
    height: 1em
    margin-bottom: 0.2em
    &:last-child
      width: 30%

.placeholder-footer
  padding: 0.5rem 1rem 1rem
  div
    background: $background
    height: 1em
    width: 40%

+mobile
  .menu-collections
    justify-content: center
    text-align: center
    li
      margin: 0.25rem
  .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
  .menu-collections
    font-size: 0.8rem
    padding-left: 1rem
  .menu-nav
    border-top: 1px solid $border
    display: flex
    flex-grow: 1
    flex-shrink: 1
  .menu-list .menu-link
    padding: 0.25rem 1rem
  .menu-hello
    background: #fff
    flex-grow: 0
    flex-shrink: 0
  .menu-close
    display: none