/* Skiplinks */

.mkui-skiplinks {
  list-style: none;
  position: relative;
  z-index: 1000;
  padding: 0;
  margin: 0;
}

.mkui-skiplinks a {
  background: var(--color-bg-header);
  display: block;
  position: absolute;
  font-family: var(--font-body);
  left: -9999px;
  padding: 1em;
}

.mkui-skiplinks a:focus {
  left: 0px;
}

/* Layout */

.mkui-layout {
  position: relative;
}

.mkui-layout-init {
  display: none;
}

.mkui-layout.content {
  display: block;
  max-width: var(--max-width-content, 100%);
  margin: 0 auto;
}

.mkui-layout.panel {
  display: grid;
  grid-template-columns: 1fr;
  transition: grid-template-columns 0.3s ease-in-out;
}

.mkui-panel {
  transform: translateX(-100%);
  position: fixed;
  top: 0;
  bottom: env(safe-area-inset-bottom);
  z-index: 101;
  transition:
    transform 0.3s ease-in-out,
    margin 0.3s ease-in-out;
}

.mkui-panel-inner {
  position: sticky;
  top: 0px;
  height: 100vh;
  position: sticky;
  overflow-y: auto;
}

/* .mkui-panel.left .mkui-slot */
.mkui-panel.left,
.mkui-panel.left .mkui-slot {
  width: var(
    --width-left-panel-mobile,
    var(--width-left-panel),
    var(--width-panel)
  );
}

.mkui-panel.left.active,
.mkui-panel.right.active {
  transform: translateX(0);
}

.mkui-panel.right,
.mkui-panel.right .mkui-slot {
  width: var(
    --width-right-panel-mobile,
    var(--width-right-panel),
    var(--width-panel)
  );
}

.mkui-panel.left {
  transform: translateX(-100%);
  background: var(--color-bg-panel-left);
  border-right: var(--border-panel-left, var(--border-panel));
  left: 0;
}

.mkui-panel.right {
  transform: translateX(100%);
  background: var(--color-bg-panel-right);
  border-left: var(--border-panel-right, var(--border-panel));
  right: 0;
}

.mkui-content-wrapper,
main {
  width: 100%;
}

.mkui-overlay.o-layout {
  background: var(--color-overlay-layout, var(--color-overlay));
}

.mkui-overlay.o-mobile {
  background: var(--color-overlay-mobile-menu, var(--color-overlay));
}

.mkui-overlay {
  position: fixed;
  top: 0 !important;
  bottom: env(safe-area-inset-bottom);
  right: 0;
  left: 0;
  z-index: 100;
  cursor: pointer;
  will-change: opacity;
  transition: all ease 0.4s;
  visibility: hidden;
  opacity: 0;
}

.mkui-overlay.active {
  visibility: visible;
  opacity: 1;
}

.mkui-layout-init {
  transition: none !important;
  display: none;
}

.mkui-menu {
  list-style-type: none;
}

main {
  position: relative;
  flex: 1;
  margin: 0 auto;
}

.mkui-footer {
  background: var(--color-bg-footer);
  border-top: var(--border-footer);
}