System.register(["./p-641f968d.system.js"],(function(n){"use strict";var e;return{setters:[function(n){e=n.h}],execute:function(){n("N",i);function i(n,i){var t="\n\n* {\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n}\n\n.container {\n  background: var(--sqm-portal-background);\n}\n\n.menu-items {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n@keyframes slideIn {\n  0% {\n    left: -350px;\n  }\n  100% {\n    left: 0;\n  }\n}\n\n@media screen and (min-width: 800px) {\n  :host {\n    max-width: 300px;\n  }\n  .toggler,\n  .hamburger {\n     user-select: none;\n     visibility:hidden;\n  }\n  .container{\n    position: sticky;\n    top: 0;\n  }\n  .menu-items {\n    min-width: 290px;\n    max-width: 320px;\n    box-sizing: border-box;\n    padding: 0px 15px;\n  }\n  .menu-items > :not(:last-child): {\n    margin-bottom: 4px;\n  }\n}\n@media screen and (max-width: 799px) {\n  .toggler {\n    border: 2px solid #eee;\n    cursor: pointer;\n    opacity: 0;\n    z-index: 5;\n  }\n\n  .container {\n    position: sticky;\n    top: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 60px;\n    width: 60px;\n    flex-direction: column;\n    z-index: 100;\n  }\n  .menu-items {\n    display: none;\n    padding: 20px;\n    border-right: var(--sqm-border-thickness) solid var(--sqm-border-color);\n    padding-top: 60px;\n    background: var(--sqm-portal-background); \n    width: 100vw;\n    height: 100vh;\n    position: absolute;\n    top: 0;\n    right: 0;\n    left: 0px;\n    margin: 0;\n    animation: slideIn 500ms ease-in-out;\n  }\n\n  .toggler,\n  .hamburger {\n    visibility: visible !important;\n  }\n\n  .container {\n    display: flex;\n  }\n\n  .hamburger > .line {\n    visibility: visible !important;\n  }\n\n\n  .toggler,\n  .hamburger {\n    position: absolute;\n    padding: 20px 10px;\n  }\n\n  .toggler {\n    z-index: 100;\n    width: 100%;\n    height: 100%;\n  }\n\n  .hamburger {\n    z-index: 10;\n    width: 75%;\n    height: 100%;\n  }\n\n  .toggler:checked ~ .menu-items {\n    display: block;\n  }\n\n  /***** Turn hamburger into an X *****/\n  .toggler:checked ~ .hamburger > .line:nth-child(1) {\n    opacity: 0;\n  }\n\n  .toggler:checked ~ .hamburger > .line:nth-child(2) {\n    transform: rotate(45deg) translate(0px, -0.5px);\n  }\n\n  .toggler:checked ~ .hamburger > .line:nth-child(3) {\n    transform: rotate(-45deg) translate(3px, -3.5px);\n  }\n\n  .toggler:checked ~ .hamburger > .line:nth-child(1),\n  .toggler:checked ~ .hamburger > .line:nth-child(2),\n  .toggler:checked ~ .hamburger > .line:nth-child(3) {\n    width: 75%;\n    border-bottom: 3px solid "+n.mobileMenuColor+";\n    margin: 0;\n  }\n\n  .hamburger > .line {\n    visibility:hidden;\n    z-index: 2;\n    height: 4px;\n    width: 100%;\n    margin-bottom: 3px;\n    border-bottom: 5px solid "+n.mobileMenuColor+";\n  }\n}\n";return e("div",{class:"container",part:"sqm-base"},e("style",null,t),e("input",Object.assign({type:"checkbox",class:"toggler"},n)),e("div",{class:"hamburger"},e("div",{class:"line"}),e("div",{class:"line"}),e("div",{class:"line"})),e("div",{class:"menu-items",part:"sqm-items-container"},i))}}}}));