/* ==================================================
   SUPERSEAL V2 TRANSPORT CONTROLS
   New 1672 x 941 master artwork
   ================================================== */


/* --------------------------------------------------
   RETIRE OLD TRANSPORT HITBOXES
   -------------------------------------------------- */

.play-button,
.stop-button,
.loop-button,
.previous-button,
.next-button,
.change-loop-button,
.final-transport-arrow,
.reverse-sample-button {
  pointer-events: none !important;
}


/* The floating REV SAMPLE control is gone in V2. */

.reverse-sample-button {
  display: none !important;
}


/* Do not show retired mappings in D mode. */

body.debug .play-button,
body.debug .stop-button,
body.debug .loop-button,
body.debug .previous-button,
body.debug .next-button,
body.debug .change-loop-button,
body.debug .final-transport-arrow,
body.debug .reverse-sample-button {
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
}


/* ==================================================
   V2 TRANSPORT ROW
   ================================================== */

.v2-transport-control {
  position: absolute;

  z-index: 120;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 0.65vw;

  appearance: none;

  background: transparent;

  cursor: pointer;

  touch-action: manipulation;

  -webkit-tap-highlight-color:
    transparent;
}


/* --------------------------------------------------
   BUTTON 1
   PREVIOUS BEAT
   -------------------------------------------------- */

.v2-previous {
  left: 22.65%;
  top: 75.15%;

  width: 7.15%;
  height: 11.35%;
}


/* --------------------------------------------------
   BUTTON 2
   RESTART CURRENT BEAT
   -------------------------------------------------- */

.v2-restart {
  left: 31.45%;
  top: 75.15%;

  width: 7.15%;
  height: 11.35%;
}


/* --------------------------------------------------
   BUTTON 3
   PLAY / PAUSE
   -------------------------------------------------- */

.v2-play-pause {
  left: 40.25%;
  top: 75.15%;

  width: 7.15%;
  height: 11.35%;
}


/* --------------------------------------------------
   BUTTON 4
   SAMPLE PAD
   -------------------------------------------------- */

.v2-sample {
  left: 49.05%;
  top: 75.15%;

  width: 7.15%;
  height: 11.35%;

  border-radius: 0.8vw;

  transition:
    background 90ms ease,
    box-shadow 90ms ease;
}


/*
   Sample has been captured.

   The transparent overlay fills the painted circle
   button with red light.
*/

.v2-sample.is-loaded {
  background:
    rgba(255, 20, 12, 0.50);

  box-shadow:
    inset 0 0 1.1vw
      rgba(255, 80, 40, 0.85),

    0 0 0.45vw
      rgba(255, 30, 20, 0.75),

    0 0 1.1vw
      rgba(255, 25, 15, 0.40);
}


/* Flash harder each time the sample is struck. */

.v2-sample.is-triggered {
  background:
    rgba(255, 30, 15, 0.82);

  box-shadow:
    inset 0 0 1.3vw
      rgba(255,255,255,0.45),

    0 0 0.7vw
      rgba(255,40,20,1),

    0 0 1.5vw
      rgba(255,40,20,0.72);
}


/* --------------------------------------------------
   BUTTON 5
   NEXT BEAT
   -------------------------------------------------- */

.v2-next {
  left: 57.85%;
  top: 75.15%;

  width: 7.15%;
  height: 11.35%;
}


/* ==================================================
   DEBUG
   ================================================== */

body.debug .v2-transport-control {
  background:
    rgba(0, 255, 255, 0.20) !important;

  outline:
    2px solid cyan !important;

  box-shadow:
    none !important;
}


/* Keep loaded SAMPLE identifiable in debug. */

body.debug .v2-sample.is-loaded {
  outline:
    2px solid red !important;

  background:
    rgba(255, 30, 20, 0.28) !important;
}