/******************************************************************************\

                  This file is part of the Buildbotics firmware.

         Copyright (c) 2015 - 2023, Buildbotics LLC, All rights reserved.

          This Source describes Open Hardware and is licensed under the
                                  CERN-OHL-S v2.

          You may redistribute and modify this Source and make products
     using it under the terms of the CERN-OHL-S v2 (https:/cern.ch/cern-ohl).
            This Source is distributed WITHOUT ANY EXPRESS OR IMPLIED
     WARRANTY, INCLUDING OF MERCHANTABILITY, SATISFACTORY QUALITY AND FITNESS
      FOR A PARTICULAR PURPOSE. Please see the CERN-OHL-S v2 for applicable
                                   conditions.

                 Source location: https://github.com/buildbotics

       As per CERN-OHL-S v2 section 4, should You produce hardware based on
     these sources, You must maintain the Source Location clearly visible on
     the external case of the CNC Controller or other product you make using
                                   this Source.

                 For more information, email info@buildbotics.com

\******************************************************************************/

#menu, #menuLink
  transition: all 0.2s ease-out;

#menu
  width sidebar-width
  background #222
  overflow hidden

  a
    color #999
    padding: 0.6em 0 0.6em 0.6em

  .save
    display block
    margin 0.25em 0.6em

  .pure-menu li
    a:hover, a:focus
      background #333

  .pure-menu-list
    border 0

  .pure-menu-heading
    background inherit
    margin 0
    padding 0
    font-size 110%
    color #fff

    .pure-menu-link
      padding 0.6em
      color #fff

  .pure-menu-item .pure-menu-link
    padding-left 1.5em

#menuLink
  position absolute
  opacity 0.9
  background #222
  display none
  font-size 10px
  width 2em
  height auto
  padding 2.1em 1.6em

  &:hover
    background #333

  span
    position relative
    display block

  span, span:before, span:after
    background-color #fff
    width 100%
    height 0.2em

  span:before, span:after
    position absolute
    content " "
    margin-top -0.6em

  span:after
    margin-top 0.6em


@media (max-width: collapse-width)
  #menu
    position absolute
    z-index 100
    height 100vh
    width 0
    opacity 0.9

  #menuLink
    display block
    z-index 100

  #layout.active
    #menu
      width sidebar-width

    #menuLink
      margin-left sidebar-width
