@use './reset';
@use './variables';
@use './utils';
@use './loader';
@use './scroll';
@use './input';
@use './dropdown';
@use './navbar';
@use './search';
@use './header';
@use './table';
@use './modal';
@use './tiles';
@use './login';
@use './discover';

:root {
  overscroll-behavior: none;
}

body {
  color: var(--color);
  background-color: var(--background);
}

#app {
  display: flex;
  flex-direction: row;
  min-height: 100vh !important;
}

main {
  flex-grow: 1;
  max-width: 100vw;
  padding: .5rem 1rem;
  padding-bottom: calc(var(--player-height) + .5rem);
}

.logo {
  user-select: none;
  display: flex;
  justify-content: center;
  padding: 1rem 1rem .75rem;
}

a {
  text-decoration: none;
  color: var(--color);

  &:hover {
    color: var(--secondary-color);
    text-decoration: underline;
  }
}

@media (max-width: 850px) {
  main {
    padding-bottom: calc(var(--navbar-height) + var(--player-height) + .5rem);
  }
}

@media (min-width: 850px) {
  .sidebar+main {
    max-width: calc(100vw - var(--sidebar-width));
  }
}