/**
 * F1CSS - Menu Mobile - 04 Jan 2023
 *  
 * @author  C. Moller <xavier.tnc@gmail.com>
 * 
 * @version 1.1.0 - DEV - 10 Jan 2023
 *
 */

.menu__mobile {
  --mobilemenu-spacing: 0.5em;
  --mobilemenu-color-background: #262626;
  --mobilesubmenu-color-background: #111;
}


@media (max-width:580px) {

  .menu__mobile {
    background-color: var(--mobilemenu-color-background);
    box-shadow: 0 0 10px -3px var(--mobilemenu-color-background);
    padding: var(--mobilemenu-spacing);
    transform: translateX(100%);
    transition: transform 0.6s;
    width: min(100vw, 240px);
    visibility: hidden;
    position: fixed;
    display: block;
    height: 100vh;
    z-index: 20;
    opacity: 0;
    right: 0;
    top: 0;
  } 

  .menu__toggle:checked ~ .menu__mobile {
    visibility: visible;
    transform: translateX(0%);
    opacity: 0.98;
  }

  .menu > li { 
    border-bottom: 1px solid #fff1;
    border-radius: 0;
  }

  .menu > li > a {
    line-height: 8vh;
  }

  .menu__mobile .submenu {
    position: relative;
    background-color: var(--mobilesubmenu-color-background);
    width: 100%;
    top: -1vh;
  }  

}