:root {
  // Defaults overwritten by user CSS if desired
  --smdm-sm-transition-easing: ease-in-out;
  --smdm-sm-color-bg: rgb(10 10 9);
  --smdm-sm-color-text: rgb(238 237 235);
  --smdm-sm-color-icon: rgb(238 237 235);
  --smdm-sm-color-active: rgb(32 31 29);
  --smdm-sm-color-hover: rgb(20 20 19);
  --smdm-sm-color-controls: rgb(20 20 19);
  --smdm-sm-color-overlay: rgba(0, 0, 0, 0.3);
  --smdm-sm-item-padding: 0.9rem 1.5rem;

  // Defaults ovewritten by JS
  --smdm-sm-menu-width: 320px;
  --smdm-sm-menu-level: 0;
  --smdm-sm-transition-duration: 300ms;
  --smdm-sm-min-width-fold: 640px;

  // Calculated
  --smdm-sm-calc-menu-width: var(--smdm-sm-menu-width);
  --smdm-sm-calc-slide-width: min(100vw, var(--smdm-sm-calc-menu-width));
  --smdm-sm-calc-wrapper-translation: calc(
    var(--smdm-sm-calc-slide-width) * var(--smdm-sm-menu-level) * -1
  );
}

// // If screen is larger, set to JS configured menu width
// @media screen and (min-width: 415px) {
//   :root {
//     --smdm-sm-calc-menu-width: var(--smdm-sm-menu-width);
//   }
// }

.slide-menu {
  position: fixed;
  max-width: 100%;

  height: 100vh;
  top: 0;
  left: 0;
  display: none;

  box-sizing: border-box;

  transition: transform var(--smdm-sm-transition-duration) var(--smdm-sm-transition-easing);

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }

  transform: translateX(100%);
  will-change: transform;

  z-index: 1000;
  background-color: var(--smdm-sm-color-bg);
  color: var(--smdm-sm-color-text);

  &__slider {
    width: var(--smdm-sm-calc-menu-width);
    overflow-x: hidden;
    height: 100vh;
    max-width: 100%;

    &::-webkit-scrollbar {
      display: none;
    }

    & {
      -ms-overflow-style: none;
      /* IE and Edge */
      scrollbar-width: none;
      /* Firefox */
    }

    &__wrapper {
      display: flex;
      width: fit-content;

      .slide-menu__submenu {
        width: var(--smdm-sm-calc-slide-width);
      }

      transform: translateX(var(--smdm-sm-calc-wrapper-translation));

      margin: 0;
      padding-left: 0;
      list-style: none;

      transition: transform var(--smdm-sm-transition-duration) var(--smdm-sm-transition-easing);
      will-change: transform;
    }
  }

  &__submenu {
    display: none;
    width: var(--smdm-sm-calc-menu-width);
    margin: 0;
    padding-left: 0;
    list-style: none;

    &--active {
      display: block;
      visibility: hidden;
    }

    &--current {
      display: block;
      visibility: visible !important;
    }

    & > .slide-menu__listitem {
      display: flex;
      width: 100%;
      border-bottom: solid 1px var(--smdm-sm-color-active);
    }
  }

  &__item {
    display: block;
    color: var(--smdm-sm-color-text);
    cursor: pointer;
    text-decoration: none;
    padding: var(--smdm-sm-item-padding);
    flex: 1 0 auto;

    &:hover {
      background-color: var(--smdm-sm-color-hover);
    }
  }

  &__title {
    overflow-wrap: break-word;
    hyphens: auto;
    color: var(--smdm-sm-color-text);
    background-color: var(--smdm-sm-color-controls);
  }

  &__control {
    cursor: pointer;

    &s {
      display: flex;
      color: var(--smdm-sm-color-text);
      background-color: var(--smdm-sm-color-controls);

      & .slide-menu__control {
        padding: 0.75rem 1.5rem;
        color: var(--smdm-sm-color-text);
        background-color: var(--smdm-sm-color-controls);
        border: none;
      }
    }
  }

  &__submenu--foldable {
    background-color: var(--smdm-sm-color-bg);
    height: 100vh;
    overflow-x: auto;
    // display: none;
  }

  &__item--active {
    background-color: var(--smdm-sm-color-active);
  }

  &--additional-content {
    padding: var(--smdm-sm-item-padding);
    border-bottom: solid 1px var(--smdm-sm-color-active);
    width: 100%;
  }

  &__foldable__wrapper {
    display: none;
    overflow-y: auto;
  }

  &--fold-open &__foldable__wrapper {
    display: flex;

    & .slide-menu__submenu--active {
      display: block;
    }
  }

  &--fold-open &--invisible-on-open-fold {
    visibility: hidden;
  }

  &--fold-open &--hidden-on-open-fold {
    display: none;
  }

  &__navigator {
    background-color: var(--smdm-sm-color-bg);
    color: var(--smdm-sm-color-icon);
    border: none;
    cursor: pointer;
  }

  &__overlay {
    display: none;
  }

  &--open {
    &-hidden {
      display: none;
    }

    &-invisible {
      visibility: hidden;
    }

    &-show {
      visibility: visible;
      display: flex;
    }

    .slide-menu__overlay {
      display: block;
      position: fixed;
      overscroll-behavior: contain;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: var(--smdm-sm-color-overlay);
    }
  }

  &.right {
    flex-direction: row-reverse;

    .slide-menu__foldable__wrapper {
      flex-direction: row-reverse;
    }
  }

  body[data-slide-menu-level='0'] &--invisible-on-root-level,
  body:not([data-slide-menu-level]) &--invisible-on-root-level {
    visibility: hidden;
  }

  body[data-slide-menu-level='0'] &--hidden-on-root-level,
  body:not([data-slide-menu-level]) &--hidden-on-root-level {
    display: none;
  }
}