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

// Player height (matches media-player component min-height)
$player-height: 48px;

app-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  overflow: visible;
}

// App-level media player: shown on mobile (fixed strip), hidden on desktop (navbar instance shown)
app-media-player {
  // Mobile: fixed strip below navbar
  @media (max-width: #{$bp-md - 1px}) {
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    right: 0;
    z-index: 199;
  }

  // Desktop: hidden (navbar contains the visible instance)
  @media (min-width: $bp-md) {
    display: none;
  }
}

// Main content padding
@media (max-width: #{$bp-md - 1px}) {
  main {
    padding-top: calc(var(--navbar-height) + #{$player-height});

    &.no-stream {
      padding-top: var(--navbar-height);
    }
  }
}

@media (min-width: $bp-md) {
  main {
    padding-top: var(--navbar-height);
  }
}