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

// Bar heights (keep in sync so player sits flush below navbar)
$navbar-height-mobile: 64px;
$navbar-height-desktop: 52px;
$player-height: 48px;

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

app-media-player {
  position: fixed;
  top: $navbar-height-mobile;
  left: 0;
  right: 0;
  z-index: 199;
}

main {
  padding-top: calc(#{$navbar-height-mobile} + #{$player-height});
}

@media (min-width: #{$bp-md}) {
  app-media-player {
    top: $navbar-height-desktop;
  }

  main {
    padding-top: calc(#{$navbar-height-desktop} + #{$player-height});
  }
}