/* root/default variables */

/* @font-face {
  font-family: "Planet Kosmos";
  font-style: normal;
  font-weight: normal;
  src: url("./assets/fonts/planet_kosmos.ttf") format("truetype");
} */

:root {
  --page-background: #f1f1f1;
  --footer-font-color: #a8a8a8;
  --softer-font-color: #c3c3c3;
  --selected-button-font-color: #606060;
  --screen-overlay-font-color: #e5e5e5;
  --selected-font-color: #fff;
  --hover-font-color: #212529;
  --button-color: #f1f1f1;
  --selected-button-color: #a3a3a3;
  --footer-background: #ffffff;
  --footer-knob-color: #ffffff;
  --footer-knob-indicator: #747474;
  --footer-knob-indicator-hover: #9b9b9b;
  --footer-knob-outline: #286fc4;
  --footer-audio-settings-background: #e5e5e5;
  --footer-audio-settings-background-inset-shadow: rgba(0, 0, 0, 1);
  --footer-overflow-shadow: unset;
  --footer-overflow-shadow-color: rgba(0, 0, 0, 0.5);
  --chat-background: rgb(255, 255, 255, 0.7);
  --pdf-canvas-background: rgba(255, 255, 255, 0.2);
  --button-focus-border-color: #3b3b3b;
  --file-drop-border-color: #444648;
  --overlay-font-size: 30px;
  --overlay-font-weight: 200;
  --tour-font-color: #fff;
  /* --colored-cursor: auto;
  --colored-cursor-pointer: pointer;
  --colored-cursor-grab: grab; */
}
/* dark theme */
[data-bs-theme="dark"] {
  --page-background: #18191a;
  --footer-font-color: #a8a8a8;
  --softer-font-color: #848484;
  --selected-button-font-color: #606060;
  --screen-overlay-font-color: #e5e5e5;
  --selected-font-color: #000;
  --hover-font-color: #212529;
  --selected-button-color: #f1f1f1;
  --button-color: #a3a3a3;
  --footer-background: #444648;
  --footer-knob-color: #5f6164;
  --footer-knob-indicator: #d4d7dc;
  --footer-knob-indicator-hover: #ffffff;
  --footer-knob-outline: #2fc1ff;
  --footer-audio-settings-background: #2f3032;
  --footer-audio-settings-background-inset-shadow: rgba(0, 0, 0, 1);
  --footer-overflow-shadow: unset;
  --footer-overflow-shadow-color: rgba(255, 255, 255, 0.5);
  --chat-background: rgb(68, 70, 72, 0.7);
  --pdf-canvas-background: rgba(68, 70, 72, 0.2);
  --button-focus-border-color: #bababa;
  --file-drop-border-color: #1e2021;
  --tour-font-color: #fff;
  --colored-cursor: auto;
  --colored-cursor-pointer: pointer;
  --colored-cursor-grab: grab;
}

html {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  /* the actual background colour is set in JS in pixi instead, this is just a fallback */
  background-color: var(--page-background);
  overflow: hidden;
}

body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  cursor: var(--colored-cursor);
  /* cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 28 28' enable-background='new 0 0 28 28' xml:space='preserve' width='28px' height='28px'><polygon fill='%23ff0000' points='8.2,20.9 8.2,4.9 19.8,16.5 13,16.5 12.6,16.6 ' /><polygon fill='%23ff0000' points='17.3,21.6 13.7,23.1 9,12 12.7,10.5 ' /><rect fill='%23ff0000' x='12.5' y='13.6' transform='matrix(0.9221 -0.3871 0.3871 0.9221 -5.7605 6.5909)' width='2' height='8' /><polygon fill='%23ff0000' points='9.2,7.3 9.2,18.5 12.2,15.6 12.6,15.5 17.4,15.5 ' /></svg>"),
    auto; */
}

/* problem: scroll doesn't extend past a few pixels */
/* make the footer width variable so it can resize visually, but scroll the contents of it.
make a slight shadow to show that it's scrollable */

#footer {
  position: relative;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 95%;
  border-radius: 100px;
  height: 100px;
  overflow-y: visible;
  background-color: var(--footer-background);
  user-select: none;
  box-shadow: 0px 30px 35px 0px rgba(0, 0, 0, 0.1);
}

#footer-and-audio-settings-wrapper {
  user-select: none;
  bottom: 30px;
  position: fixed;
  left: 0;
  right: 0;
  height: 100px;
}

.footer-shadow-container {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  position: absolute;
  pointer-events: none;
  left: 0;
  top: 0;
  transition: box-shadow 0.15s linear;
}

.footer-shadow-left {
  z-index: 99;
  box-shadow: inset 60px 0px 60px -60px var(--footer-overflow-shadow-color);
}

.footer-shadow-right {
  z-index: 99;
  box-shadow: inset -60px 0px 60px -60px var(--footer-overflow-shadow-color);
}

#footer-overflow-wrapper {
  height: 100%;
  overflow-x: scroll;
  position: relative;
  border-radius: 100px;
}

/* Hide scrollbar for Chrome, Safari and Opera */
#footer-overflow-wrapper::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#footer-overflow-wrapper {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

#footer-row {
  min-width: 765px;
  position: relative;
  height: 100%;
  color: var(--footer-font-color);
  font-size: 20px;
  margin: 0 auto;
}

#canvas {
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  overflow: hidden;
  overflow-y: hidden;
}

#rooms-dropdown {
  cursor: var(--colored-cursor-pointer);
}

.room-dropdown-li-playing {
  background-color: #198754;
  color: var(--selected-font-color);
}

.room-dropdown-li-current-playing {
  background-color: #0d6efd;
}

.room-dropdown-li-current-playing-private {
  background-color: #a68500;
}

.room-dropdown-item {
  user-select: none;
}

.room-dropdown-item-playing {
  color: var(--selected-font-color) !important;
}

.room-dropdown-item-playing:hover {
  color: var(--hover-font-color) !important;
}

.dropdown-light {
  background-color: var(--button-color) !important;
  height: 48px;
}

.dropdown-light:hover {
  color: var(--selected-button-font-color) !important;
}

#change-room-dropdown {
  width: 48px;
  height: 48px;
  transition: background-color 200ms;
}

#change-room-dropdown.show {
  background-color: var(--selected-button-color);
}

#color-picker-button {
  height: 48px;
  width: 48px;
  border: none;
  padding: 0;
  outline: inherit;
  color: inherit;
  background: none;
  font: inherit;
  cursor: var(--colored-cursor-pointer);
}

#color-picker-button:focus #color-picker-button-current-color {
  border: 5px solid var(--selected-button-color) !important;
}

#color-picker-button-current-color {
  border: 5px solid var(--button-color) !important;
}

.select-button {
  min-width: 48px;
  min-height: 48px;
  border-radius: 8px;
  cursor: var(--colored-cursor-pointer);
  border: none;
  background-color: var(--button-color);
  animation-timing-function: ease-in-out;
  transition: border 200ms, background-color 200ms;
}

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

.select-button svg {
  transition: opacity 200ms;
}

.select-button:hover svg {
  opacity: 0.7;
}

.borderless-small-icon {
  border: unset;
  background-color: unset;
  color: var(--footer-font-color);
}

.borderless-small-icon:hover svg {
  opacity: 0.6;
  transition: opacity 200ms;
}

#rooms-superscript {
  position: absolute;
  top: 3px;
  left: 5px;
  font-size: 11px;
}

#instrument-picker-dropdown.show {
  background-color: var(--selected-button-color) !important;
  color: var(--selected-font-color) !important;
}

/* alternatively, wrap this in another div with appropriate border radius and set at bottom of dropdown */
#instrument-loader-progress-bar {
  position: absolute;
  bottom: 0;
  height: 3px;
  width: 100%;
  pointer-events: none;
  background: none !important;
}

#instrument-loader-progress-bar-wrapper {
  border-radius: 6px;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.dropdown-menu {
  overflow-y: scroll;
  max-height: 80vh;
  position: fixed !important;
}

.dropdown-menu-settings {
  overflow-y: scroll;
  max-height: 80vh;
}

#settings-dropup-button.show {
  background-color: var(--selected-button-color);
}

#footer-left {
  padding-left: 3%;
}

#footer-right {
  padding-right: 3%;
}

#current-peer-indicator {
  position: relative;
  top: 7px;
  background-color: #0d6efd;
  width: 5px;
  height: 5px;
  border-radius: 100%;
  left: 0;
  right: 0;
  margin: 0 auto;
}

#peers {
  position: relative;
  height: 100%;
}

#peers-wrapper {
  /* wrapper necessary because applying overflow scroll and
    visible on both axes means visible actually becomes auto - or not? weird overflow issues */
  overflow-y: hidden;
  height: 100%;
}

.peer {
  position: relative;
  transform: translate(0, 30%);
  height: 80px;
  flex-direction: column;
}

.icon-subtext-static {
  margin-top: 1px;
  font-size: 11px;
}

.icon-subtext {
  position: absolute;
  bottom: -18px;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 11px;
}

#peer-template {
  opacity: 0;
}

#dropup-container {
  position: relative;
}

#volume-slider {
  width: 70px;
}

#volume-svg {
  cursor: var(--colored-cursor-pointer);
}

#connectivity-indicator-wrapper {
  position: relative;
  margin-bottom: 10px;
}

.voting-container {
  padding: 25px;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
}

.var-filename {
  margin-left: 0.4em;
}

.var-peer-container {
  text-align: center;
  font-style: italic;
  color: var(--softer-font-color);
  overflow: scroll;
}

.var-peer-icon {
  display: inline-block;
  margin-right: 3px;
  margin-left: -10px;
}

.vote-number {
  margin: 5px 7px 0;
  color: var(--softer-font-color);
}

.toast-header,
.toast-body {
  position: relative;
}

.toast-timer-progress-bar {
  position: absolute;
  bottom: 0;
  height: 3px !important;
  width: 100%;
  pointer-events: none;
  background: none !important;
}

.toast-timer-progress-bar-wrapper {
  border-radius: 6px;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.toast-timer-progress-bar-internal {
  transition: width 0.5s linear;
}

#pdf-canvas-wrapper {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translate(-50%, 0);
  background-color: var(--pdf-canvas-background);
  overflow: scroll;
  justify-content: center;
  flex-wrap: wrap;
}

.pdf-canvas {
  padding: 5px;
}

#file-drop-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background-color: #000;
  pointer-events: none;
  opacity: 0.5;
  width: 100%;
  height: 100%;
  padding: 30px;
  transition: opacity 200ms;
}

#file-drop-overlay-inner {
  text-align: center;
  padding-top: 30vh;
  border-radius: 50px;
  border: 20px solid var(--file-drop-border-color);
  width: 100%;
  height: 100%;
  font-size: var(--overlay-font-size);
  font-weight: var(--overlay-font-weight);
  color: var(
    --selected-font-color
  ); /* but this is dulled by the opacity overlay */
}

.invisible {
  display: none;
}

.fully-transparent {
  opacity: 0 !important;
}

.box-shadow-container {
  position: fixed;
  transition: opacity 500ms;
  opacity: 0;
  overflow: hidden;
}

.box-shadow {
  box-shadow: 0 0 25px 10px;
  position: relative;
  margin: 0 auto;
}

.box-shadow-container-visible {
  opacity: 1 !important;
  transition: opacity 0s;
}

#prompt-to-click {
  position: fixed;
  color: var(--screen-overlay-font-color);
  border-radius: 500px;
  padding: 20px;
  background: var(--file-drop-border-color);
  font-size: var(--overlay-font-size);
  font-weight: var(--overlay-font-weight);
  width: 250px;
  text-align: center;
  top: 50%;
  left: 50%;
  opacity: 0.8;
}

#chat-room {
  position: fixed;
  top: 30px;
  left: 30px;
  background-color: var(--chat-background);
  border-radius: 10px;
  padding: 15px 15px 15px 13px;
  transition: opacity 200ms;
  box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.05);
}

#chat-room:hover.clickable {
  opacity: 0.6;
}

#chat-room-inner {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  gap: 10px;
  flex-direction: column;
  justify-content: center;
}

#chat-room-icon-svg {
  width: 100%;
  height: 100%;
}

.chat-icon-open {
  background-color: var(--chat-background);
  border-radius: 100%;
  width: 28px;
  height: 28px;
}

#chat-room-icon-svg-wrapper {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  transition: opacity 200ms;
}

#chat-room:not(.clickable) #chat-room-icon-svg-wrapper:hover {
  opacity: 0.6;
}

#chat-room-icon-svg:hover {
  cursor: var(--colored-cursor-pointer);
}

#chat-room-input-container {
  display: flex;
  gap: 5px;
  align-items: center;
}

#chat-room-messages {
  overflow-y: scroll;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
}

.chat-room-message {
  width: 100%;
  overflow-wrap: break-word;
}

#chat-room-notifications-bubble {
  background-color: #e64646;
  min-width: 17px;
  height: 15px;
  position: absolute;
  top: -4px;
  right: -7px;
  border-radius: 50%;
  color: white;
  pointer-events: none;
  font-size: 10px;
  text-align: center;
  vertical-align: middle;
}

.display-none {
  display: none !important;
}

.clickable:hover {
  cursor: var(--colored-cursor-pointer);
}

#audio-settings-inner {
  width: 100%;
  height: 100%;
}

#audio-settings {
  position: absolute;
  height: 60px;
  min-width: 550px;
  width: 80%;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 0;
  box-shadow: inset 0px -10px 35px -35px
    var(--footer-audio-settings-background-inset-shadow);
  border-radius: 100px 100px 0 0;
  background-color: var(--footer-audio-settings-background);
  transition: bottom 500ms ease, width 500ms ease;
}

/* .techno-font {
  font-family: "Planet Kosmos", sans-serif;
} */

.eq-knobs {
  /* width: 100%; */
  height: 100%;
  display: flex;
  justify-content: center;
  margin-right: 5px;
}

.eq-knob {
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background-color: var(--footer-knob-color);
  transition: box-shadow 50ms ease, color 200ms ease;
  color: var(--footer-knob-indicator);
  font-weight: 200;
  font-size: 14px;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 2;
  padding-top: 5px;
}

.eq-knob-container {
  position: relative;
  width: 50px;
  height: 100%;
}

.eq-knob-outline {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  z-index: 0;
}

.eq-knob:focus,
.eq-knob:hover {
  box-shadow: 0 0 20px 5px rgba(255, 255, 255, 1);
  cursor: var(--colored-cursor-grab);
  color: var(--footer-knob-indicator-hover);
}

.eq-knob:focus .eq-knob-indicator:focus,
.eq-knob:hover .eq-knob-indicator:hover {
  background-color: var(--footer-knob-indicator-hover);
}

.eq-knob-indicator {
  transition: background-color 200ms ease;
  background-color: var(--footer-knob-indicator);
  border-radius: 100%;
  width: 4px;
  height: 4px;
  margin: 0 auto;
}

#envelope-visualiser-container {
  position: relative;
  height: 40px;
  width: 150px;
  overflow: hidden;
}

#envelope-visualiser {
  width: 400px;
  height: 40px;
  position: absolute;
  left: 0;
}

#envelope-visualiser-background {
  position: absolute;
  left: 0;
  top: 0;
  height: 40px;
  border-radius: 5px;
  background-color: red;
}

.smartour-slot {
  color: var(--tour-font-color);
  font-size: 16px;
  padding: 15px;
}