.modus-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.modus-header {
  z-index: 999;
  height: 56px;
  border-bottom: 1px solid var(--bs-border-color-translucent);
  box-shadow: 0 2px 2px 0 var(--bs-box-shadow-sm);

  button[data-modus-item="menu-btn"] {
    margin-right: .25rem;
    margin-left: .25rem;
  }

  .menu-btn {
    margin-top: 12px;
    font-size: 24px;
  }
}

.modus-body {
  display: flex;
  flex: 2;
  overflow-y: auto;

  .modus-sidebar {
    z-index: 998;
    flex: 0 0 60px;
    order: -1;
    width: 60px;
    overflow-x: hidden;
    overflow-y: auto;
    white-space: nowrap;
    background-color: var(--bs-body-bg);
    border-right: 1px solid var(--bs-border-color-translucent);
    box-shadow: 1px 0 2px 0 var(--bs-box-shadow-sm);
    // stylelint-disable-next-line
    transition: flex-basis 0.2s cubic-bezier(0.57, 0.1, 0.73, 1.28);

    .nav-link {
      display: flex;
      align-items: center;
      height: 3rem;
      padding: 0 10px 0 0;
      font-size: 16px;
      color: var(--bs-body);

      &.active {
        color: var(--bs-white);
        background-color: var(--bs-info-text-emphasis); // #217cbb
      }

      &.disabled {
        opacity: .3;
      }

      .left-nav-icon {
        display: inline-block;
        justify-self: center;
        height: 1.5rem;
        padding: 0 18px;

        // stylelint-disable
        .modus-icon,
        .modus-icons {
          font-size: 1.5rem;
          line-height: 1;
        }
        // stylelint-enable

        // stylelint-disable-next-line
        img {
          max-width: 100%;
          height: 24px;
        }
      }
    }
  }
}

.modus-footer {
  z-index: 1090;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  height: 24px;
  padding: 2px 10px;
  overflow: hidden;
  border-top: 1px solid var(--bs-border-color-translucent);
}

.modus-content-rows {
  position: relative;
  display: flex;
  flex: 1 1 100%;
  flex-direction: column;
}

.modus-content-columns {
  position: relative;
  display: flex;
  flex: 1 1 100%;
  flex-direction: row;
  min-height: 0;
}

.modus-content {
  position: relative;
  flex: 1 1 100%;
  max-height: 100%;
  overflow-y: auto;
  background-color: var(--bs-body-bg);
}

.modus-toolbar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 48px;
  // stylelint-disable-next-line
  max-height: calc(48px * 2);
  padding: 0 16px;
  border-bottom: 1px solid var(--bs-border-color-translucent);
}

.sidebar-open > .modus-sidebar {
  ul {
    padding: 0;

    li {
      list-style: none;
    }
  }
}

// stylelint-disable-next-line
.sidebar-open > .modus-sidebar ul li .collapsed .expand-icon {
  transform: rotate(180deg);
}

// stylelint-disable-next-line
.sidebar-open > .modus-sidebar ul .sub-nav .nav-link {
  padding-left: 3rem;
  border: 0;
}

.sidebar-closed {
  > .modus-sidebar {
    flex: 0 0 60px;

    ul {
      padding: 0;

      li {
        list-style: none;

        // stylelint-disable-next-line
        .sub-nav {
          display: none;
        }
      }
    }
  }
}

// stylelint-disable-next-line
.sidebar-closed > .modus-sidebar ul li.has-subnav:hover .sub-nav {
  position: absolute;
  left: 60px;
  display: block;
  margin-top: -48px;
}

// stylelint-disable-next-line
.sidebar-closed > .modus-sidebar ul li.has-subnav:hover .sub-nav .nav-link {
  padding-right: 1rem;
}

.modus-panel {
  position: relative;
  z-index: 500;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  max-height: 100%;
  background-color: var(--bs-secondary-bg-subtle);

  &.panel-sm {
    min-width: 256px;
    max-width: 256px;
  }

  &.panel-md {
    min-width: 352px;
    max-width: 352px;
  }

  &.panel-lg {
    min-width: 448px;
    max-width: 448px;
  }

  &.panel-xl {
    min-width: 544px;
    max-width: 544px;
  }

  .panel-header {
    position: relative;
    z-index: 600;
    display: flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color-translucent);

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin: 0 !important;
      text-align: center;
    }
  }

  .panel-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .static-container {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      padding: 8px;
      border-bottom: 1px solid var(--bs-border-color-translucent);
    }

    .scroll-container {
      height: 100%;
      overflow-y: auto;
    }
  }

  .panel-footer {
    padding: 0 8px;
  }
}

@media (min-width: 1050px) {
  .sidebar-open > .modus-sidebar {
    flex: 0 0 300px;
  }
}

@media (max-width: 1050px) {
  .sidebar-open {
    > .modus-sidebar {
      position: absolute;
      width: 300px;
      // stylelint-disable-next-line
      height: calc(100% - 56px);
    }

    .modus-main-content {
      margin-left: 60px;
    }
  }
}