/* FIX THIS */
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700');

@import url('./vars.css');
@import url('./animations.css');
@import url('./scrollbar.css');
@import url('./component/checkbox.css');
@import url('./component/status.css');
@import url('./component/loader.css');
@import url('./component/header.css');
@import url('./component/button.css');
@import url('./component/sidebar.css');
@import url('./component/track-list.css');
@import url('./component/empty-state.css');
@import url('./component/tooltip.css');
@import url('./component/profile.css');
@import url('./component/time-line.css');
@import url('./component/dropdown.css');
@import url('./component/card.css');
@import url('./component/form.css');
@import url('./component/label.css');
@import url('./component/thumbnail.css');
@import url('./component/banner.css');

html {
  background: black;
}

body {
  margin: 0;
  height: 100vh;
  color: var(--text-color);
  background-color: var(--bg-color);
  overflow: hidden;
  font-family: 'Source Sans Pro', sans-serif;
}

h1 {
  margin: 8px 0;
}

a,
button {
  cursor: pointer;
  outline: 0;
}

a {
  color: inherit;
  text-decoration: none;
  color: skyblue;
  padding: 4px;
}

.icon {
  width: 1em;
}

.icon--small-x {
  width: 1em;
}

.icon--small {
  width: 1em;
}

.icon--large {
  width: 1.4em;
}

.icon--large-x {
  width: 1.8em;
}

.icon path {
  fill: var(--text-color);
}

#window {
  margin: auto;
  position: absolute;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 0;
  transition: bottom 300ms ease;
}

#window.short {
  bottom: var(--player-height);
}

#window.adaptive {
  --color-palette-dark: var(--adaptive-palette-dark);
  --color-palette-vibrant: var(--adaptive-palette-vibrant);
  --main-color: var(--color-palette-vibrant);
  --track-list-active-color: var(--color-palette-dark);
}

.view {
  height: 100%;
  overflow: auto;
  flex-grow: 1;
  position: relative;
}

.page {
  margin: 0;
  position: relative;
  text-align: center;
  height: 100%;
  overflow: auto;
}

.page--layout {
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.page--content {
  flex-grow: 1;
  position: relative;
}

.grid {
  display: block;
  margin: auto;
  width: 100%;
  /* white-space: nowrap; */
  overflow: auto;
  position: relative;
  padding: 0;
  /*
  scroll-snap-type: mandatory;
  scroll-snap-points-y: repeat(300px);
  scroll-snap-type: y mandatory;
  */
}

.grid::-webkit-scrollbar {
  display: none;
}

.trunk-label {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

section {
  text-align: left;
}

section header {
  padding: 16px 0;
  margin: 0 32px;
  border-bottom: 1px solid var(--card-bg-color);
}

section header h1 {
  text-transform: capitalize;
}

section header p {
  color: var(--subtext-color);
}
