@use './styles/mixins' as *;

// =============================================================================
// App — root layout (flex column: StatusBar / body / BottomStatusBar)
// =============================================================================

.root {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.body {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;

  @include mobile {
    flex-direction: column;
  }
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

// ---------------------------------------------------------------------------
// Sidebar drawer (mobile)
// ---------------------------------------------------------------------------

.sidebarWrapper {
  display: flex;
  flex-shrink: 0;

  @include mobile {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    z-index: 100;
    transform: translateX(-100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--transition-slow),
                visibility 0s linear 400ms;

    &[data-sidebar-open="true"] {
      transform: translateX(0);
      visibility: visible;
      pointer-events: auto;
      transition: transform var(--transition-slow),
                  visibility 0s;
    }
  }
}

.overlay {
  display: none;

  @include mobile {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
  }
}
