.box-type-15 {
  --number-of-notes: 15;
  --hole-width: 16px;
}
.box-type-20 {
  --number-of-notes: 20;
  --hole-width: 14px;
}
.box-type-30,
.box-type-30F {
  --number-of-notes: 30;
  --hole-width: 12px;
}

/* Disable browser default interactive search behavior */
.search__field::-webkit-search-decoration,
.search__field::-webkit-search-cancel-button,
.search__field::-webkit-search-results-button,
.search__field::-webkit-search-results-decoration {
  display: none;
}

.search {
  position: relative;
  margin-bottom: 1.5rem;
}
.search__form {
  display: flex;
}
.search__field {
  flex: 1 0 auto;
  padding: 6px;
  margin: 0;

  border: 1px solid var(--mb-black);
  border-right: none;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  font: var(--main-font);
  font-size: 13px;

  -webkit-appearance: none; /* for safari */
}
/* By making the search field required, we can treat the
   ":valid" pseudo-class like a ":not-empty" pseudo-class
   and prevent focus outlines from appearing after a user
   starts typing. This makes things look nicer. Plus, focus
   outlines are less useful when there's text because the
   text gets highlighted on focus, which is noticeable.
   See https://stackoverflow.com/a/16956610/1154642 */
.search__field:valid {
  outline: none;
}
.search__field:invalid {
  box-shadow: none; /* prevents an error shadow in firefox */
}
.search__button {
  background: var(--mb-white);
  flex: 0 0 auto;
  display: flex;
  padding: 5px;
  margin: 0;
  width: 32px;
  cursor: pointer;

  border: 1px solid var(--mb-black);
  border-left: none;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;

  -webkit-appearance: none;
  -moz-appearance: none;
}
.search__results-container {
  --search-results-distance-from-top-of-screen: 100px;
  --search-results-bottom-margin: 20px;

  position: absolute;
  z-index: var(--z-search-results);
  left: 0;
  right: 0;
  top: 100%;
  box-shadow: 0px -4px 0px -1px white,
              0px -3px 0px 0px black;

  background: var(--left-sidebar-color);
  border: 1px solid var(--mb-black);
  max-height: calc(100vh - var(--search-results-distance-from-top-of-screen) - var(--search-results-bottom-margin));
  overflow: auto;
}
.search__results-container.is-hidden {
  display: none;
}
.search-all-button {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--mb-gray-30);
  background: var(--mb-white);
  cursor: pointer;
  text-align: left;
  font-style: italic;

  -webkit-appearance: none;
  -moz-appearance: none;
}
.search__results {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.search__result {
  font-size: 13px;
  text-decoration: none;
  display: block;
  padding: 0.5rem;
}
.search__result:hover {
  background: var(--mb-gray-6);
}

.browse {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.browse__content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  position: relative;
}
.browse__tabs ul {
  display: flex;
  list-style-type: none;
  border-bottom: var(--tabs-border) solid var(--tabs-ui-color);
  margin: 0;
  padding: 0;
}
.browse__tab button {
  display: block;
  line-height: 1;
  font-size: 0.875rem;
  text-decoration: none;
  padding: 4px 8px;
  margin: 0;
  border-top: var(--tabs-border) solid white;
  border-left: var(--tabs-border) solid white;
  border-right: var(--tabs-border) solid white;
  border-bottom: none;
  color: var(--text-color);
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.browse__tab button:active {
  color: var(--text-color);
}
.browse__tab.is-active button {
  position: relative;
  border-color: var(--tabs-ui-color);
}
.browse__tab.is-active button::after {
  position: absolute;
  display: block;
  content: '';
  width: 100%;
  left: 0;
  top: calc(100% - 1px);
  border-bottom: calc(var(--tabs-border) + 2px) solid white;
}

.browse__back-link {
  position: absolute;
  top: 0;
  left: 0;

  font-size: 10px;
  border: none;
  background: none;
  cursor: pointer;
  line-height: 1;
  padding: 7px 6px 7px 12px;
  margin: 0;

  -webkit-appearance: none;
  -moz-appearance: none;
}
.back-arrow {
  transform: translate(-8px, -2px);
  position: absolute;
  font-size: 12px;
  transition: transform 0.2s ease-out;
}
.browse__back-link:hover .back-arrow {
  transform: translate(-10px, -2px);
}
.browse__title {
  margin: 1rem 0 0.25rem;
  font-size: 1rem;
  font-weight: normal;
  text-align: center;
}
.browse__back-link + .browse__title {
  margin-top: 1.4rem;
}
.browse__songs {
  flex: 1 1 0px;
  overflow: auto;
  border-top: 1px solid var(--mb-gray-20);
}
.browse__no-results {
  font-size: 14px;
  font-style: italic;
}
.browse__error {
  font-size: 14px;
  font-style: italic;
  color: var(--error-text-red);
}
.library-loader {
  text-align: center;
}
.library-loader img {
  width: 20px;
  height: 19px;
}

.library-songs {
  font-size: 13px;
  padding: 0;
  margin: 1rem 0;
}
.library-song {
  line-height: 1.25;
  margin-bottom: 0.5rem;
  padding-left: 0.5rem;
  list-style-type: none;
  background-image: url('/images/bullet.svg');
  background-repeat: no-repeat;
  background-position: 0 5px;
}
.library-song__creator {
  color: var(--discrete-text);
}
.library-note {
  font-size: 11.5px;
  margin: 0;
  padding: 0.5rem 0;
  color: var(--mb-gray-60);
  border-top: 1px solid var(--mb-gray-20);
}

.greater-workspace {
  margin-left: var(--left-sidebar-width);
  margin-right: var(--right-sidebar-width);
  width: 100%;
}

@media (max-width: 900px) { /* --two-to-three-columns */
  .greater-workspace {
    margin-right: 0;
  }
}
@media (max-width: 720px) { /* --one-to-two-columns */
  .greater-workspace {
    margin-left: 0;
  }
}

.workspace {
  position: relative;
  padding: 4rem 0 0 0;
  cursor: crosshair;
  /*
    prevent horizontal scrolling
    when the paper is wider than
    the viewport. For some reason,
    'hidden' breaks the sticky
    header, but clip doesn't.
  */
  overflow-x: clip;

  /*
    for centering the paper, even
    when the paper is wider than
    the viewport.
  */
  display: flex;
  justify-content: center;
}
.workspace > * {
  /* ensure that crosshairs only appear on the workspace surface itself. */
  cursor: initial;
}

.music-box-kit {
  /*
   This is an inline-block element,
   in order for its width to depend
   on its content.
  */
  display: inline-block;

  /*
    A trick for centering the
    paper when the paper is
    wider than the viewport
    (like on small phones). See:
    https://stackoverflow.com/a/32191236/1154642
  */
  margin: 0 -100%;
}

.music-box {
  --left-box-edge-width: 30px;
  --right-box-edge-width: 30px;
  --paper-width: calc(var(--paper-side-margin) * 2 + var(--number-of-notes) * var(--hole-width));
  --music-box-width: calc(var(--left-box-edge-width) + var(--paper-width) + var(--right-box-edge-width));
}

/* these classes inherit custom properties from the values defined above. */
.music-box__bottom-plate {
  position: fixed;
  top: var(--music-box-distance-from-top-of-workspace);
  z-index: var(--z-music-box-bottom-plate); /* positions the box underneath the paper */
  width: var(--music-box-width);
  height: var(--music-box-height);

  background-color: var(--music-box-color);
  transform: translateX(calc(-1 * var(--left-box-edge-width)));
  border-radius: 12px;
}

.music-box__playhead {
  position: fixed;
  top: var(--playhead-distance-from-top-of-workspace);
  z-index: var(--z-music-box-playhead);

  width: var(--paper-width);
  height: 1px;

  background-color: #ff8d00;
  pointer-events: none;
}

.paper {
  position: relative; /* to allow absolute positioning of the add-paper-button */
  display: inline-block; /* to allow its width to depend on its content */
  background: var(--paper-color);
  padding-top: 1rem;
  box-shadow: 0px 0px 11px -8px #444;

  /* allow the paper to completely move through the box */
  margin-bottom: calc(100vh - var(--playhead-distance-from-top-of-workspace) - 1rem);
}

.song-title {
  padding: 2rem var(--paper-side-margin) 2.5rem;
  text-align: center; /* centers the loading indicator */
}
/* loading indicator */
.song-title img {
  width: 20px;
  height: 19px;
}
.song-title input {
  text-align: center;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-bottom: 1px solid var(--mb-gray-40);
  font-size: 0.875rem;
  width: calc((var(--number-of-notes) - 1) * var(--hole-width));
  padding-bottom: 2px;
}

.pitch-header {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.95);
  padding: 4px var(--paper-side-margin) 3px;
  /* Fix an issue where the header can stick over the edge of the paper on lo-res displays */
  margin: 0 1px;
  /* Stack our header above the note-lines and holes */
  z-index: var(--z-music-box-note-header);
}

[class^="box-type-30"] .pitch-label:nth-of-type(odd) {
  margin-top: 1.125rem;
}
[class^="box-type-30"] .pitch-label:nth-of-type(even) {
  margin-bottom: 1.125rem;
}
[class^="box-type-30"] .pitch-label {
  font-size: 0.875rem;
}
.pitch-label {
  flex: 0 0 var(--hole-width);
  text-align: center;
  position: relative;
}
.pitch-label.is-highlighted {
  background: var(--highlighted-pitch-color);
}
.sharp::after {
  display: block;
  content: '#';
  font-size: 0.5rem;
  position: absolute;
  top: -2px;
  left: 0px;
}

.note-range {
  position: relative;
  padding: 0 var(--paper-side-margin);
}

.selection-drag-zone {
  display: block;
  cursor: crosshair;
}
.selection-drag-zone.is-dragging {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: var(--z-drag-zone--is-dragging);
}
@media (max-width: 900px) { /* --two-to-three-columns */
  .selection-drag-zone.is-dragging {
    width: calc(100vw - var(--left-sidebar-width));
  }
}
@media (max-width: 720px) { /* --one-to-two-columns */
  .selection-drag-zone.is-dragging {
    width: 100vw;
  }
}
.selection-box {
  position: fixed;
  z-index: var(--z-selection-box);
  border: 1px solid rgb(var(--selection-color));
  background-color: rgba(var(--selection-color), 0.1);
  opacity: 0;
}

.note-drag-zone {
  display: block;
  cursor: move;
}
.note-drag-zone.is-dragging {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: var(--z-drag-zone--is-dragging);
}
@media (max-width: 900px) { /* --two-to-three-columns */
  .selection-drag-zone.is-dragging {
    width: calc(100vw - var(--left-sidebar-width));
  }
}
@media (max-width: 720px) { /* --one-to-two-columns */
  .selection-drag-zone.is-dragging {
    width: 100vw;
  }
}

.note-lines {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  min-height: var(--total-note-line-height);
}

.note-line {
  position: relative;
  width: var(--hole-width);
  /* We use .gif instead of .svg for repeating background images,
     for performance reasons. See also: https://youtu.be/ptGO2k9uqRM */
  background-image: url('/images/measure-lines.gif');
  background-position: 0 var(--note-line-starting-gap);
  cursor: pointer;
}

.note-line:first-child {
  background-image: url('/images/measure-lines.gif');
  background-position: calc(var(--hole-width) / 2) var(--note-line-starting-gap);
  background-repeat: repeat-y;
}

.note-line:last-child {
  background-image: url('/images/measure-lines.gif');
  background-position: right calc(var(--hole-width) / 2) top var(--note-line-starting-gap);
  background-repeat: repeat-y;
}

/* Crisper measure lines for retina devices (looks nice on page boundaries) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .note-line,
  .note-line:first-child,
  .note-line:last-child {
    background-image: url('/images/measure-lines-2x.gif');
    background-size: 20px 48px;
  }
}

/* The vertical line running down the center of the column */
.note-line::before {
  display: block;
  content: "";
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  top: var(--note-line-starting-gap);
  bottom: 0;
  width: 0;
  /* use border instead of background-color because print settings often omit background colors */
  border-left: 1px solid var(--mb-black);
}

.shadow-note {
  display: none;
  width: var(--hole-width);
  height: var(--hole-width);
  border-radius: 50%;

  /* We create two layers of dimming for shadow notes:
       background color → dimmed dark gray,
       box shadow → dimmed white,
    This ensures the we see dimming over both light backgrounds (like the notes lines)
    and dark backgrounds (like when a dragged note is overlapping an existing note).
  */
  background-color: rgba(var(--hole-color), 0.4);
  box-shadow: inset 0px 0px 0px 8px rgba(255,255,255,0.30);

  position: absolute;
  top: var(--y-adjustment-for-hole-width);
  z-index: var(--z-music-box-notes);

  /* The shadow notes themselves aren't targets. We're always
     just hovering or clicking on the note lines below them. */
  pointer-events: none;
}
.shadow-note.is-selected {
  box-shadow:
    inset 0px 0px 0px 2px rgb(var(--selection-color)), inset 0px 0px 0px 2.5px rgba(255,255,255,0.85), /* selection ring */
    inset 0 0 0 100px rgba(255,255,255,0.30); /* ensures we don't override this part of the shadow-note's dimming */

  z-index: var(--z-music-box-selected-notes); /* if notes are stacked, ensure that the selected one is on top */
}

.shadow-note.is-visible {
  display: block;
}
.shadow-note.is-silent {
  background-color: var(--mb-white);
  background-image: var(--asterisk-svg);
  background-size: 80% 80%;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: luminosity; /* grayscale the svg */
}

.hole {
  display: block;
  position: absolute;
  top: var(--y-adjustment-for-hole-width);
  width: var(--hole-width);
  height: var(--hole-width);
  border-radius: 50%;
  border: none;
  background-color: rgb(var(--hole-color));
  cursor: pointer;
  z-index: var(--z-music-box-notes);
  padding: 0;
  transition: background-color 1s;
}
.hole.is-active {
  background-color: var(--active-hole-color);
  transition: background-color 0s;
}
.hole.is-silent {
  background-color: var(--mb-white);
  background-image: var(--asterisk-svg);
  background-size: 80% 80%; /* the SVG is scaled to allow a gap between the image and background lines, regardless of the hole size. */
  background-position: center;
  background-repeat: no-repeat;
}
.hole.is-selected {
  box-shadow: inset 0px 0px 0px 2px rgb(var(--selection-color)), inset 0px 0px 0px 2.5px rgba(255,255,255,0.85);
  cursor: move;
  z-index: var(--z-music-box-selected-notes);
}

.space-editor-drag-zone {
  display: block;
  position: absolute;
  z-index: var(--z-drag-zone);
  top: 0;
  right: 0;
  width: var(--paper-side-margin);
  cursor: row-resize;
}
.space-editor-drag-zone.is-dragging {
  width: calc(100vw - var(--left-sidebar-width) - var(--right-sidebar-width));
  transform: translateX(50%);
  right: 50%;
  z-index: var(--z-drag-zone--is-dragging);
}
@media (max-width: 900px) { /* --two-to-three-columns */
  .space-editor-drag-zone.is-dragging {
    width: calc(100vw - var(--left-sidebar-width));
  }
}
@media (max-width: 720px) { /* --one-to-two-columns */
  .space-editor-drag-zone.is-dragging {
    width: 100vw;
  }
}

.space-editor-bar {
  position: absolute;
  z-index: var(--z-space-editor-bar);
  top: -2px; /* aligns the bar vertically with the measure line */
  width: calc((var(--number-of-notes) * var(--hole-width)) + var(--paper-side-margin));
  height: 5px;
  border-radius: 5px;
  background-color: var(--mb-gray-35);
  pointer-events: none; /* prevents a bug where the bar blocks mouseout */
  opacity: 0;

  /* center horizontally */
  margin: 0 auto;
  left: 0;
  right: 0;
}
.space-editor-bar.is-visible {
  opacity: 1;
}

.audio-disabled-message {
  display: block;
  position: fixed;
  top: 0;
  right: var(--right-sidebar-width);
  z-index: var(--z-audio-context-message);
  width: 156px; /* a magic number that fits our text well */
  opacity: 1;
  font-size: 12px;
  text-align: left;
  padding: 1rem;
  background: var(--surface-color);
}
@media (max-width: 900px) { /* --two-to-three-columns */
  .audio-disabled-message {
    right: 0;
  }
}
.audio-disabled-message--hidden {
  display: none;
}
.audio-disabled-message--resolved {
  opacity: 0;
  transition-property: opacity;
  transition-delay: 1.25s;
  transition-duration: 1.5s; /* combined time: 2.75s */
  transition-timing-function: linear;
}

.right-sidebar {
  position: fixed;
  z-index: var(--z-controls);
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--right-sidebar-width);
  padding: 1rem;
  border-left: var(--controls-border);
  background: var(--surface-color);
  font-size: 13.5px; /* the largest size that won't cut off text in the dropdowns */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

@media (max-width: 900px) { /* --two-to-three-columns */
  .right-sidebar {
    /* translated off-canvas */
    transform: translateX(var(--right-sidebar-width));
    transition: transform 300ms cubic-bezier(.07,.23,.34,1);
    border-left: transparent;
  }
  .right-sidebar.on-canvas {
    /* translated on-canvas */
    transform: translateX(0);
    z-index: var(--z-off-canvas-sidebar);
  }
}

.controls {
  flex: 1 1 0%;
}

.controls__section {
  border-top: var(--controls-border);
  padding: 1rem 0 1rem;
}
/* define spacing between controls elements */
.controls__section > *:not(:last-child) {
  padding-bottom: 1rem;
}

.play-button {
  display: block;
  margin: 0 auto;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  line-height: 0;
}
.controls .play-button {
  padding: 0 1rem 1rem; /* add padding only for the sidebar play button */
}

.play-button__outer-circle {
  fill: var(--icon-dark);
}
.play-button__inner-shape {
  fill: var(--controls-button-color);
}

div:has(> .file-dropdown__item) {
  border: 1px solid var(--mb-gray-30);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0px 3px 10px 0 rgb(0 0 0 / 20%);
}
.file-dropdown__heading {
  background-image: url(/images/file.svg), url(/images/select-down.svg);
  background-position: 7px center, right 7px center;
  background-repeat: no-repeat, no-repeat;
  padding-left: 1.8rem;
}
.file-dropdown__item {
  font-family: system-ui, Helvetica, sans-serif;
  font-size: 12px;
  background: var(--mb-offwhite);
  padding: 0.5rem;
  cursor: pointer;
  border: none;
}
.file-dropdown__item:hover {
  background-color: var(--mb-gray-6);
}

.music-box-type-select {
  padding-left: 1.8rem;
  background-image: url(/images/music-box-type.svg),
                    url(/images/select-down.svg);
  background-position: 7px center, right 7px center;
  background-repeat: no-repeat, no-repeat;
}

.snap-to {
  display: flex;
  align-items: center;
}
.snap-to__label {
  white-space: nowrap;
  margin-right: 0.5rem;
}

.footnote p {
  font-size: 12px;
  margin: 0;
  color: var(--mb-gray-50);
  position: relative;
  padding-left: 6px; /* space for the icon */
}
.footnote p::before {
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  background-image: var(--asterisk-svg);
  background-repeat: no-repeat;
  background-size: 100%;
  top: -2px;
  left: -8px;
}
.footnote a {
  color: var(--mb-gray-50);
}
.footnote--hidden {
  display: none;
}

.controls-icon {
  position: fixed;
  top: 0;
  right: 0;
  z-index: var(--z-nav-icons);
}
.controls-icon > button {
  border: none;
  background: transparent;
  margin: 0;
  padding: 1rem;
  cursor: pointer;
}
.controls-icon svg {
  display: block;
}

@media (min-width: 900px) { /* --two-to-three-columns */
  .controls-icon {
    display: none;
  }
}

.song-updated {
  padding: 4px 0 2px 0;
  font-size: 13px;
  opacity: 1;
  color: var(--mb-gray-60);
  background: rgba(239, 239, 239, 0.75); /* essentially, var(--surface-color) with some added transparency */;
}
.song-updated--hidden {
  opacity: 0;

  /* fade-out settings */
  transition-property: opacity;
  transition-duration: 3s;
}

@media (min-width: 720px) { /* --one-to-two-columns */
  .song-updated {
    position: fixed;
    top: 4px;
  }
}

.overlay-message {
  position: fixed;
  margin-top: -0.5rem; /* minor adjustment to prevent awkward overlap on top */
  z-index: var(--z-overlay-message);
}
.overlay-message__content {
  padding: 1rem 2.5rem;
  background: var(--mb-black);
  color: var(--mb-white);
  text-align: center;
  opacity: 0.85;
  transition: opacity 1.5s;
}
.overlay-message__content.is-fading {
  opacity: 0;
}

.share-box {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: var(--z-share-box);
  margin: 0 0 0.75rem 1rem;
  display: flex;
  flex-direction: column;
}
.share-box > div + div {
  margin-top: 0.375rem;
}
@media (min-width: 720px) { /* --one-to-two-columns */
  .share-box {
    left: var(--left-sidebar-width);
  }
}

.share-button {
  display: flex;
  gap: 6px;
  width: 100%;
  align-items: center;
  height: 28px;
  font-size: 12px;
  text-decoration: none;
  padding: 4px 10px;
  background: var(--controls-button-color);
  color: var(--text-color);
  border: 1px solid var(--controls-button-border-color);
  border-bottom: 1px solid var(--controls-button-border-bottom-color);
  border-radius: 4px;
  box-shadow: 0 1px 3px -3px rgba(0,0,0,1);
  cursor: pointer;
}
.share-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-right: 4px;
  background: transparent 0 0 no-repeat;
}
.share-text {
  flex: 1 0 auto;
}


.web-share-button + .email-share-button {
  display: none;
}
@media (min-width: 720px) { /* --one-to-two-columns */
  .web-share-button {
    display: none;
  }
  .web-share-button + .email-share-button {
    display: flex;
  }
}


.floating-actions {
  position: fixed;
  bottom: 1rem;
  right: calc(var(--right-sidebar-width) + 1rem);
  width: var(--floating-action-button-diameter);
  z-index: var(--z-floating-actions);
}

.floating-actions > div + div {
  margin-top: 1rem;
}

.floating-actions .floating-play-button {
  display: none;
}

.floating-actions .floating-play-button circle {
  /* see also: .icon-light-stroke */
  stroke-width: 2px;
  paint-order: stroke;
  stroke: var(--mb-gray-3);
}

@media (max-width: 900px) { /* --two-to-three-columns */
  .floating-actions {
    right: 1rem;
  }
  .floating-actions .floating-play-button {
    display: block;
  }
}

.back-to-top-button {
  width: var(--floating-action-button-diameter);
  height: var(--floating-action-button-diameter);
  border-radius: 50%;
  border: 0;
  color: var(--text-color);
  background: var(--mb-white);
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
  overflow: overlay; /* prevent box-shadow clipping in safari */

  /* for positioning content */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  /* for transitions */
  opacity: 1;
}
.back-to-top-button.is-transitioning {
  transition: all 200ms linear;
}
.back-to-top-button.is-transitioning.is-hidden {
  display: flex;
  opacity: 0;
  transform: translateY(10px);
}
.back-to-top-button.is-hidden {
  display: none;
}
.back-to-top-button svg {
  transition: transform 100ms linear;
}
.back-to-top-button:hover svg {
  transform: translateY(-2px);
}
.back-to-top-label {
  text-transform: uppercase;
  margin-top: 6px;
  line-height: 1;
}
.back-to-top-observed {
  position: absolute;
  top: 0;
  height: var(--back-to-top-scroll-position);
}

.extend-song-button {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* We have to set 'width: 100%' instead of 'right: 0'
    to get full width because it's a button. See:
    https://stackoverflow.com/q/29293302/1154642 */
  width: 100%;
  margin: 0 auto; /* This centering prevents weird overlaps when printing */
  padding: 0;
  border: 0;
  font-family: var(--main-font);
  font-size: 1.25rem;
  height: var(--footer-button-height);
  line-height: var(--footer-button-height); /* for vertical centering */
  background: var(--paper-color);
  cursor: pointer;
  z-index: var(--z-music-box-extend-button);
}
.extend-song-button:hover {
  background: linear-gradient(to bottom,
   rgba(255,255,255,0.8) 0%,
   rgba(255,255,255,0.9) 40%,
   var(--paper-color) 80%,
   var(--paper-color) 100%
  );
}
.extend-song-button:hover .dashed-line {
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;

  /* Getting a nice-looking, centered, custom-length, gray-and-white dashed border is difficult.
     I ended up hacking it a bit by using a linear gradient background image, on a 1px height element. */
  background-image: linear-gradient(90deg,
   var(--mb-gray-40) 0%,
   var(--mb-gray-40) 30%,
   var(--paper-color) 30%,
   var(--paper-color) 70%,
   var(--mb-gray-40) 70%,
   var(--mb-gray-40) 100%
  );
  background-size: 20px 1px;
  background-position: center;
  pointer-events: none;
}

.divider {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;

  height: 1px;
  background-image: linear-gradient(90deg,
   var(--mb-gray-40) 0%,
   var(--mb-gray-40) 30%,
   var(--paper-color) 30%,
   var(--paper-color) 70%,
   var(--mb-gray-40) 70%,
   var(--mb-gray-40) 100%  );
  background-size: 20px 1px;
  background-position: center;
  pointer-events: none;
}

.divider__trim-icon {
  position: absolute;
  right: 10px;
  top: 2px;
  font-size: 1.25rem;
  font-family: var(--main-font);
  padding: 0;
  border: none;
  cursor: pointer;
  color: var(--mb-gray-40);
  pointer-events: auto;
  background: none;
}
.divider__trim-icon--hidden {
  display: none;
}

