:root {
  --yellow:  #FFDE00;
  --light-yellow: #FFE739;
  --lighter-yellow: #FFEB64;
  --green: #006666;
  --dark-green: #005151;
  --darker-green: #003737;
  --light-green: #0A7B7B;
  --lighter-green: #238B8B;
  --lightest-green: #62BBBB;
  --blue: #006699;
  --light-blue: #008ED3;
  --lighter-blue: #07ABFB;
  --dark-blue: #00537B;
  --darker-blue: #003F5D;
  --gray:	#787878;
  --dark-gray:	#606060;
  --darker-gray:	#303030;
  --darkest-gray: #202020;
  --light-gray: #A0A0A0;
  --lighter-gray: #D0D0D0;
  --lightest-gray: #E8E8E8;
  --thick-border-width: 1.5pt;
  --thick-border: var(--thick-border-width) solid var(--dark-gray);
  --thin-border-width: 1pt;
  --thin-border: var(--thin-border-width) solid var(--dark-gray);
  --note-height: 54pt;
  --track-meta-width: 84.9pt;
  --a-color: var(--darker-blue);
  --a-color-hover: var(--light-blue);
  --a-color-active: var(--lighter-blue);
  --secondary-green: hsl(94, 80%, 59%);
  --secondary-orange: hsl(20, 97%, 64%);
  --secondary-yellow: rgb(255, 244, 122);
  --secondary-red: hsl(2, 63%, 55%);
  --secondary-blue: hsl(205, 80%, 63%);
  --secondary-purple: hsl(232, 100%, 72%);
}

.hidden {
  display: none !important;
}

.display-linebreak {
  white-space: pre-line;
}

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

a:active {
  color: var(--a-color-active);
}

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

a:visited {
  color: var(--a-color)
}

body {
  margin: 0;
  font-family: sans-serif;
  /* width: 100vw; */ /* 100vw causes the content to sit under the vert scrollbar, causing a zont one to appear */
  height: 100vh;
  color: var(--darkest-gray);
}

.welcome {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  width: 100%;
  padding: 20pt 10pt;
  background-color: var(--lighter-yellow);
  box-sizing: border-box;
}

.welcome p {
  max-width: 500pt;
  margin-left: auto;
  margin-right: auto;
}

#wrapper {
  height: 100%;
}

#banana-drum {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

#banana-drum > * {
  flex-grow: 1;
}

#footer {
  --footer-height: 20pt;
  flex-basis: var(--footer-height);
  flex-grow: 0;
  flex-shrink: 0;
  text-align: center;
  background-color: var(--lightest-gray);
  line-height: var(--footer-height)
}

.beat-url {
  background-color: white;
  padding: 9.5pt 12pt;
  display: inline-block;
  border-radius: 11pt;
  overflow-wrap: anywhere;
}

.arrangement-title h1 {
  text-align: center;
  margin-bottom: 0;
}

.arrangement-controls {
  display: flex;
  padding: 20pt;
  border-bottom: var(--thick-border);
  align-items: center;
}

.arrangement-controls .overlay {
  padding: 20pt;
}

.playback-control {
  max-height: 57pt;
}

.playback-control img {
  height: 18pt;
  width: 18pt;
}

.time-controls-wrapper {
  display: flex;
}

.time-control {
  padding: 9.75pt 12pt;
}

#share-button img {
  display: none;
}

input, select {
  height: 25pt;
  box-sizing: border-box;
}

input.short, select.short {
    width: 40pt;
}

input.long, select.long {
    width: 180pt;
}

@media only screen and (max-width: 600px) {
  .time-controls-wrapper {
    flex-direction: column;
  }

  .time-control {
    padding: 0;
  }

  .time-control input, select {
    height: unset;
  }

  #share-button span {
    display: none;
  }

  #share-button img {
    display: inline-block;
  }
}

.track-viewers-wrapper {
  --scrollbar-height: 20pt;
  overflow-x: auto;

  /* Hide scrollbars on a couple browsers */
  -ms-overflow-style: none;  /* IE */
  scrollbar-width: none;  /* Firefox */
}

.track-viewers-wrapper::-webkit-scrollbar {
  display: none; /* Chrome, Edge, Safari */
}

.track-viewers-wrapper .custom-scrollbar {
  height: var(--scrollbar-height);
  left: 0;
  bottom: 0;
}

.track-viewers-wrapper.overflowing-left, .track-viewers-wrapper.overflowing-right {
  padding-bottom: var(--scrollbar-height);
}

.track-viewers-wrapper:not(.overflowing-left):not(.overflowing-right) .custom-scrollbar {
  height:0;
  opacity: 0;
  pointer-events: none;
}

.track-viewer {
  min-width: 100%;
  display: flex;
  -webkit-user-select: none; /* On safari, dragging to select notes causes a native selection of lots of stuff. So we prevent it. */
}

@keyframes loadingPulse {
  0% {background-color: white;}
  100% {background-color: var(--lighter-yellow);}
}

.track-viewer.pending-track {
  height: var(--note-height);
}

.track-viewer.pending-track .track-meta {
  animation: loadingPulse 1.5s infinite alternate;
}

.pending-note-line {
  width: 100%;
  height: var(--note-height);
  animation: loadingPulse 1.5s infinite alternate;
  border: var(--thick-border);
  position: absolute;
  left: 0;
  z-index: -1;
  margin-top: calc(-1 * var(--thick-border-width));
  margin-bottom: calc(-1 * var(--thick-border-width));
  margin-left: calc(-1 * var(--thick-border-width));
}

.track-viewer > * {
  display: inline-block;
}

/*
Scrollshadows: An Enormous Faff
Very difficult to get them to the right height, right position, and not overlapping a scrollbar
So we're putting them in each track-viewer, where we can position them with no problems
*/

.scrollshadow {
  display: none;
  width: 20pt;
  pointer-events: none;
  z-index: 1;
  position: absolute;
  /* Vertically offset shadows slightly to cover borders */
  margin-top: calc(-0.5 * var(--thick-border-width));
  height: calc(var(--thick-border-width) + var(--note-height))
}

.track-viewers-wrapper.overflowing-left .scrollshadow.left-scrollshadow {
  background: linear-gradient(to right, rgba(0,0,0,0.6), rgba(0,0,0,0) 70%);
  display: block;
  left: var(--track-meta-width);
}

.track-viewers-wrapper.overflowing-right .scrollshadow.right-scrollshadow {
  background: linear-gradient(to left, rgba(0,0,0,0.6), rgba(0,0,0,0) 70%);
  display: block;
  right: 0;
}

.track-meta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  --padding: 2pt;
  width: var(--track-meta-width);
  height: var(--note-height);
  border: var(--thick-border);
  /* Apply some negative margins to collapse borders */
  margin-top: calc(-1 * var(--thick-border-width));
  margin-bottom: calc(-1 * var(--thick-border-width));
  margin-left: calc(-1 * var(--thick-border-width));
  flex-shrink: 0;
  position: absolute;
  left: 0;
  background-color: white;
  z-index: 100; /* Currently only for covering track-controls overlay */
}

.track-meta > * {
  padding: var(--padding);
}

.track-meta .buttons-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: end
}

.track-meta .buttons-wrapper > * {
  margin-left: 4pt;
  width: 17pt;
}

.track-meta .options-button img {
  width: 8pt;
}

.guiderail-wrapper {
  flex-grow: 1;
}

.guiderail-meta {
  border-right: var(--thick-border);
  width: var(--track-meta-width);
  background-color: var(--lighter-gray);
  height: 20pt;
  position: absolute;
  z-index: 100;
}

.guiderail {
  display: flex;
  margin-left: calc(var(--track-meta-width) + var(--thick-border-width));
  flex-direction: row;
  height: 20pt;
}

.guiderail-timing {
  margin-top: calc(-1 * var(--thick-border-width));
  border-color: var(--lighter-gray);
}

.guiderail-timing.odd-beat {
  background-color: var(--lightest-gray);
}

.guiderail-timing:last-child {
  border-right: var(--thick-border)
}

.guiderail-timing-content {
  line-height: 20pt;
  text-align: center;
}

@media only screen and (min-width: 1000px) {
  /* We label the bar numbers always. On smaller screens only, we show the sub-bar labels too */
  .guiderail-timing:not(.start-of-bar) .guiderail-timing-content {
    display: none;
  }
}

/* Scrollshadow positioning is super weird. In track-viewers, we have to NOT specify top, but that doesn't work here.*/
.guiderail-wrapper .scrollshadow {
  top: 1px; /* Only works because the guiderail is at the top of the wrapper */
  height: 20pt;
}

.note-line-wrapper {
  flex-grow: 1;
  margin-left: calc(var(--track-meta-width) + var(--thick-border-width));
  border-bottom: var(--thick-border);
}

.note-line-wrapper .overlay {
  z-index: 50;
}

.track-controls {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  padding-left: 10pt;
  box-sizing: border-box;
}

.track-controls button {
  margin-right: 10pt;
}

.note-line {
  transition: opacity 0.2s;
}

.note-line .notes-wrapper {
  display: flex;
}

.note-line .polyrhythm-viewer {
  position: absolute;
  z-index: 1;
  padding-left: var(--thick-border-width);
  background-color: white;
}

.polyrhythm-viewer .polyrhythm-decoration {
  position: absolute;
  width: calc(100% - 2* var(--thick-border-width));
  height: var(--note-height);
  box-sizing: border-box;
  pointer-events: none;
}

.track-viewer[data-colour-group="yellow"] .polyrhythm-decoration {
  box-shadow: inset 0 0 7pt 2pt var(--secondary-orange);
}

.track-viewer[data-colour-group="orange"] .polyrhythm-decoration {
  box-shadow: inset 0 0 7pt 2pt var(--secondary-yellow);
}

.track-viewer[data-colour-group="green"] .polyrhythm-decoration {
  box-shadow: inset 0 0 7pt 2pt var(--secondary-yellow);
}

.track-viewer[data-colour-group="blue"] .polyrhythm-decoration {
  box-shadow: inset 0 0 7pt 2pt var(--secondary-green);
}

.track-viewer[data-colour-group="purple"] .polyrhythm-decoration {
  box-shadow: inset 0 0 7pt 2pt var(--secondary-blue);
}

.polyrhythm-viewer .polyrhythm-notes-wrapper {
  display: flex;
  width: 100%;
}

.polyrhythm-viewer .delete-polyrhythm-wrapper {
  height: var(--note-height);
  border: var(--thick-border);
  /* Apply some negative margins to collapse borders */
  margin-top: calc(-1 * var(--thick-border-width));
  margin-bottom: calc(-1 * var(--thick-border-width));
  margin-left: calc(-1 * var(--thick-border-width));
  width: 100%;
  text-align: center;
  line-height: var(--note-height);
  background-color: var(--lightest-green);
}

.polyrhythm-viewer .delete-polyrhythm-wrapper.shrouded {
   background-color: var(--light-gray);
}

.track-viewer.inaudible .note-line {
  opacity: 0.5;
}

/* Effective note-widths must be hard-coded in JS as well */
/* Update in TrackViewer.tsx if you change note dimensions */
.note-width {
  flex-basis:var(--note-height);
  flex-grow: 1;
  flex-shrink: 0;
  border-width: var(--thick-border-width);
  border-style: solid;
  margin-left: calc(-1 * var(--thick-border-width)); /* Collapse borders */
}

.note-viewer {
  /* Now collapse borders using margin */
  border-color: var(--dark-gray);
  margin-top: calc(-1 * var(--thick-border-width));
  margin-bottom: calc(-1 * var(--thick-border-width));
  height: var(--note-height);
  text-align: center;
  line-height: var(--note-height);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  background-color: white;
  overflow-x: hidden;
}

.note-viewer * {
  -webkit-user-select: none;
  user-select: none;
}

.note-viewer img {
  pointer-events: none; /* Prevent dragging note-style symbols around when trying to select notes */
}

.note-viewer.odd-beat {
  background-color: var(--lighter-gray);
}


.note-viewer.start-of-bar:not(:first-child),
.guiderail-timing.start-of-bar:not(:first-child) {
    border-left: 5pt solid var(--dark-gray);
}

.polyrhythm-viewer .note-viewer {
  flex-shrink: 1;
}

.polyrhythm-viewer .note-viewer:nth-child(2n) {
  background-color: var(--lighter-gray);
}

.note-details-viewer {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}

.note-details-viewer > * {
  align-self: center;
}

.note-details-viewer img.note-style-symbol {
  height: 70%;
}

.arrangement-viewer-body > .overlay {
  padding: 5pt;
}

.instrument-chooser {
  height: 50pt;
  width: 70pt;
  margin-right: 5pt;
  margin-bottom: 5pt;
  vertical-align: middle;
}

@keyframes shinyLink {
  /* Colours from colours.ts */
  0% {background-color: hsl(268, 61%, 69%);}
  33% {background-color: hsl(200, 97%, 51%);}
  67% {background-color: hsl(174, 61%, 47%)}
  100% {background-color: hsl(29, 88%, 69%)}
}

.shiny-link {
  animation: shinyLink 3s infinite alternate;
}


/* Overlays */
.overlay-wrapper {
  position: relative;
}

.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1000;
  top: 0px;
  left: 0px;
  background: white;
  box-sizing: border-box; /* For when it has added padding */
  transition: opacity 0.2s;
}

.overlay.visible {
  opacity: 1;
}

.overlay.invisible {
  opacity: 0;
}

.overlay.hidden {
  display: none;
}

.viewport-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: white;
  overflow: scroll;
}

/* =============================================================== */
/*                         Custom Scrollbars                       */
/* =============================================================== */

.custom-scrollbar {
  position: absolute;
  width: 100%;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.custom-scrollbar > .track {
    left: 0;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: var(--lightest-gray);
}

.custom-scrollbar > .thumb {
    left: 0;
    position: absolute;
    height: 100%;
    background-color: var(--blue);
    border-radius: 4pt;
}


/* =============================================================== */
/*                             Buttons                             */
/* =============================================================== */




button.push-button {
  box-sizing: border-box;
  display: inline-block;
  border: none;
  box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, .2), inset 0 -3px 0 0 rgba(0, 0, 0, .32);
  padding: 9.75pt 12pt;
  border-radius: 11pt;
  transition: all .2s;
  cursor: pointer;
  background-color: var(--blue);
  color: white;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  font-weight: bold;
  position: relative;
  outline: none;
  text-transform: lowercase;
  -webkit-user-select: none;
  user-select: none;
}

button.push-button.small {
  font-size: 10pt;
  padding: 1.5pt 4pt 3pt;
  font-weight: 400;
  border-radius: 5pt;
  line-height: 13pt;
}

button.push-button.medium {
  /* These properties are incomplete, because currently we only have use and it has its own particular font-size, etc */
  padding: 1.5pt 4pt 3pt;
  font-weight: 400;
  border-radius: 5pt;
}

button.push-button.green {
  background-color: var(--green);
}

button.push-button.lighter-green {
  background-color: var(--lighter-green);
}

button.push-button.gray {
  background-color: var(--light-gray);
}

button.push-button.yellow {
  background-color: var(--yellow);
}

button.push-button.dark-blue {
  background-color: var(--dark-blue);
}

button.push-button:active {
  top: 2px;
  box-shadow: inset 0px 2px 1px 0px rgba(0, 0, 0, .1);
}

button.push-button:disabled {
  cursor: auto;
}

/* anchor buttons are just meant to look like anchors */
button.anchor-button {
  all: unset;
  cursor: pointer;
  color: var(--a-color);
}

button.anchor-button:active {
  color: var(--a-color-active);
}

button.anchor-button:hover {
  text-decoration: underline;
  color: var(--a-color-hover);
}