$notesCanvasColor: #1D1D1D;
$whiteColor: #FEFEFE;
$menuBackgroundColor: #4D4D4D;
$menuLightestColor: #9C9C9C;
$menuLighterColor: #777;
$menuLightColor: #646464;
$menuDarkColor: #323232;
$menuDarkerColor: #2B2B2B;
$menuDarkestColor: #292929;
$playerWhiteBarColor: #FDFD66;
$playerBlackBarColor: #FFBF00;
$modelWhiteBarColor: #BEFCFF;
$modelBlackBarColor: #5EBBBF;
$botWhiteBarColor: #C2FECE;
$botBlackBarColor: #5CE477;

$bodyFont: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";

body {
	background: $notesCanvasColor;
	color: $notesCanvasColor;
	font-family: $bodyFont;
}

html, body {
	margin: 0;
	overflow: hidden;
}

canvas {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	vertical-align: top;
}

hr {
	border: none;
	height: 1px;
	background-color: $modelWhiteBarColor;
}

::-webkit-scrollbar {
	width: 5px;
	margin-right: 1px;
}

::-webkit-scrollbar-track {
	background: none;
}

::-webkit-scrollbar-thumb {
	background: $menuLighterColor;
	border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
	background: #555;
}

#content {
	display: none;
}

#preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: $notesCanvasColor;
	color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 1;
	z-index: 999;
	transition: opacity 0.5s;
}

#preloader.fade-out {
	opacity: 0;
	pointer-events: none;
}

.lds-preloader {
	display: inline-block;
	position: relative;
	width: 80px;
	height: 80px;
}
.lds-preloader div {
	display: inline-block;
	position: absolute;
	left: 8px;
	width: 16px;
	background: $whiteColor;
	animation: lds-preloader 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.lds-preloader div:nth-child(1) {
	left: 8px;
	animation-delay: -0.24s;
}
.lds-preloader div:nth-child(2) {
	left: 32px;
	animation-delay: -0.12s;
}
.lds-preloader div:nth-child(3) {
	left: 56px;
	animation-delay: 0;
}
@keyframes lds-preloader {
	0% {
		top: 8px;
		height: 64px;
	}
	50%, 100% {
		top: 24px;
		height: 32px;
	}
}

#canvasContainer {
	width: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

#notesDiv {
	flex: 1;
	position: relative;
}

#pianoDiv {
	height: 100px;
	position: relative;
}

#rewindReceiver {
	position: absolute;
	width: 20%;
	height: 100%;
	background-image: linear-gradient(to right, #3B3B3B, transparent);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.1s;
}

.rewindIcon {
	position: absolute;
	width: 30px;
	height: 30px;
	background-image: url('../img/rewind.svg');
	background-size: cover;
	user-select: none;
}

#sustainPedal {
	position: absolute;
	bottom: 0;
	margin: 8px;
}

.sustainPedalMark {
	width: 45px;
	height: 28.5px;
	opacity: 0.25;
	background-image: url('../img/pedal-mark.svg');
	background-size: cover;
	user-select: none;
}

.sustainPedalMark:hover {
	opacity: 0.5;
	cursor: pointer;
}

.sustainPedalMarkPressed {
	opacity: 1;
}

.sustainPedalMarkPressed:hover {
	opacity: 1;
}

#sustainPedalTooltip {
	top: initial;
	bottom: 100%;
	left: 10px;
	white-space: nowrap;
}

#sustainPedal:hover > #sustainPedalTooltip {
	display: block;
}

#historyDrawer {
	position: absolute;
	width: 400px;
	height: 100%;
	top: 0;
	right: -401px; /* Shift 1 extra pixel from element width because of border */
	background-color: $menuBackgroundColor;
	opacity: 0.95;
	border-width: 0 0 0 1px; /* Only left border */
	border-color: grey;
	border-style: solid;
	transition: 0.4s;
	z-index: 9;
}

#historyDrawer.open {
	right: 0;
}

#historyDrawerToggle {
	position: absolute;
	left: -27px;
	top: 50%;
	transform: translateY(-50%);
	height: 118px;
	width: 27px;
	background-color: $menuLightColor;
	border-width: 1px 0 1px 1px; /* Exclude right border */
	border-color: grey;
	border-style: solid;
	border-radius: 6px 0 0 6px; /* Round left corners */
	margin: 0;
	padding: 0;
	cursor: pointer;
}

#historyDrawerToggle:hover {
	background-color: $menuBackgroundColor;
}

#drawerToggleShape {
	width: 12px;
	height: 12px;
	background-color: $whiteColor;
	clip-path: polygon(0% 50%, 80% 0%, 80% 100%);
	margin: 0 auto;
}

#drawerToggleShape.open {
	transform: scaleX(-1);
}

#historyDrawerContent {
	display: flex;
	flex-flow: column;
	width: 100%;
	height: 100%;
	color: white;
	text-align: center;
}

#historyDrawerContent > ol {
	flex: 1 1 auto;
	list-style: none;
	margin: 0;
	padding: 0;
	background-color: $menuLightColor;
	overflow: hidden;
	overflow-y: scroll;
}

#historyDrawerContent > ol > li {
	position: relative;
	padding: 8px 12px;
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
	overflow: visible;
	background-color: $menuLightColor;
	cursor: pointer;
}

#historyDrawerContent > ol > li:hover {
	background-color: $menuBackgroundColor;
}

.pianoRoll {
	position: relative;
	padding: 0;
}

.historyTextContainer {
	display: inline-block;
	width: 194px;
	padding: 0 12px;
}

.historyTitle {
	display: block;
	font-size: 14px;
	font-weight: bold;
	white-space: normal;
	overflow: hidden;
	overflow-wrap: break-word;
}

.historyTitleEditable {
	cursor: text;
}

.historyTitleEditable:hover {
	background-color: $menuLightColor;
	border: none;
	border-radius: 5px;
}

.historyDescription {
	display: block;
	font-size: 12px;
	color: #DDD;
}

.heartIcon {
	position: absolute;
	font-size: 20px;
	top: 15px;
	left: 19px;
}

.heartIcon.fa-regular {
	opacity: 0;
}

#historyDrawerContent > ol > li:hover .heartIcon.fa-regular {
	opacity: 0.3;
}

#historyDrawerContent > ol > li:hover .heartIcon:hover {
	opacity: 1;
	cursor: pointer;
}

.shareIcon {
	position: absolute;
	right: 14px;
	bottom: 10px;
	opacity: 0;
}

.shareIcon:hover::after {
	content: "Share";
	display: block;
	position: absolute;
	right: 0;
	top: -180%;
	padding: 5px;
	border-radius: 5px;
	background-color: $menuLightColor;
	font-family: Arial;
	font-size: 11px;
	color: white;
	pointer-events: none;
	user-select: none;
}

#historyDrawerContent > ol > li:hover .shareIcon {
	opacity: 0.2;
}

#historyDrawerContent > ol > li:hover .shareIcon:hover {
	opacity: 1;
	cursor: pointer;
}

.shareLinkContainer {
	position: absolute;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding: 10px;
	z-index: 9999;
	background-color: $menuDarkColor;
	color: white;
	border: grey 1px solid;
	border-radius: 5px;
	font-family: Arial;
	font-size: small;
}

.shareLinkDescription {
	flex: 0 0 100%;
	margin: 0 0 9px 0;
}

.shareLinkInputText {
	flex: 1;
	width: 100%;
	box-sizing: border-box;
}

input[type="text"], textarea {
	background-color : $menuBackgroundColor;
	color: white;
}

.copyIcon {
	flex: 0 0 25px;
	margin: auto;
	font-size: 16px;
	text-align: right;
	opacity: 0.3;
}

.copyIcon:hover {
	opacity: 1;
	cursor: pointer;
}

#composeOptionsContainer {
	display: none;
	position: absolute;
	bottom: 27px;
	left: 50%;
	transform: translateX(-50%);
}

.composeOption {
	display: inline-block;
	width: 184px;
	height: 184px;
	margin: 8px;
	background-color: $menuBackgroundColor;
	border: grey 1px solid;
	border-radius: 5px;
	color: white;
	opacity: 0.9;
	text-align: center;
	user-select: none;
}

.composeOptionsTextContainer {
	display: block;
	width: 100%;
	margin: 6px 0;
}

.composeOptionTitle {
	display: block;
	font-size: 15px;
	font-weight: bold;
	margin: 9px 0 8px 0;
}

.selectButtonShape {
	background-image: url('../img/check.svg');
	background-size: cover;
}

.composeButtonTooltip {
	display: none;
	position: absolute;
	top: 100%;
	padding: 5px;
	transform: translateX(-5px);
	border-radius: 5px;
	background-color: $menuLightColor;
	font-family: Arial;
	font-size: 11px;
	color: white;
	pointer-events: none;
	user-select: none;
}

.menuButton:hover > .composeButtonTooltip {
	display: block;
}

.composeReloadButton {
	position: absolute;
	margin-left: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 32px;
	border: none;
	background: none;
	color: $whiteColor;
	cursor: pointer;
	user-select: none;
}

.composeReloadButton:hover {
	color: grey;
}

.composeReloadButton:hover > .composeButtonTooltip {
	display: block;
}

.menuContainer {
	position: absolute;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	width: 458px;
	height: 35px;
	background-color: $menuBackgroundColor;
	opacity: 0.95;
	border: grey 1px solid;
	border-radius: 6px;
	padding: 6px 6px;
	display: flex;
	align-items: center;
}

.menuButton {
	width: 35px;
	height: 35px;
	margin: 0 12px;
	padding: 5px;
	border: none;
	background: transparent;
	cursor: pointer;
}

.menuButton:hover {
	background-color: $menuLightColor;
}

.menuButtonTooltip {
	display: none;
	position: absolute;
	top: 110%;
	padding: 5px;
	transform: translateX(-5px);
	border-radius: 5px;
	background-color: $menuLightColor;
	font-family: Arial;
	font-size: 11px;
	color: white;
	pointer-events: none;
	user-select: none;
}

.menuButton:hover > .menuButtonTooltip {
	display: block;
}

.playButton {
	position: relative;
	display: inline-block;
}

#exampleList {
	position: absolute;
	display: none;
	background-color: $menuLightColor;
	list-style: none;
	min-width: 90px;
	max-height: 135px;
	margin: 0;
	padding: 0;
	left: 0;
	top: 35px;
	opacity: 0;
	overflow: hidden;
	overflow-y: scroll;
}

#exampleList > li {
	color: white;
	font-size: 11px;
	padding: 9px;
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	user-select: none;
}

#exampleList > li:hover {
	background-color: #555;
}

.playButton:hover > #exampleList,
#exampleList:hover {
	display: block;
	opacity: 0.9;
}

.menuButtonShape {
	width: 80%;
	height: 80%;
	margin: 2px;
}

.rewindButtonShape {
	background-image: url('../img/rewind.svg');
	background-size: cover;
}

.stopButtonShape {
	background-color: $whiteColor;
}

.seedButtonShape{
	background-image: url('../img/music-note.svg');
	background-size: cover;
}

.playButtonShape {
	background-color: $whiteColor;
	clip-path: polygon(0% 0%, 80% 50%, 0% 100%);
	margin-left: 5px;
}

.helpButtonShape {
	position: relative;
	background-color: $whiteColor;
	border-radius: 50%;
}

.helpButtonInner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	justify-content: center;
	align-items: center;
	width: 80%;
	height: 80%;
	border-radius: 50%;
	background-color: $menuBackgroundColor;
	color: $whiteColor;
	font-family: serif;
	font-size: 11px;
	font-weight: bold;
	user-select: none;
	pointer-events: none;
}

.volumeButtonShape {
	background-image: url('../img/volume-on.svg');
	background-size: cover;
}

.volumeButtonOff {
	background-image: url('../img/volume-off.svg');
}

.volumeSlider {
	margin: 0 12px 0 -10px;
	width: 75px;
	accent-color: $whiteColor;
	cursor: pointer;
}

.volumeSlider::-webkit-slider-runnable-track {
	height: 4px;
}

.volumeSlider::-webkit-slider-thumb {
	margin-top: -6px; /* Centers thumb on the track */
}

.settingsButtonShape {
	background-image: url('../img/settings.svg');
	background-size: cover;
}

.verticalSeparator {
	width: 1px;
	height: 100%;
	margin: 10px;
	background-color: grey;
}


.listener {
	position: absolute;
	top: 20px;
	left: 20px;
	text-align: left;
	visibility: hidden;
	animation: pulse 2s linear infinite;
}

.listenerText {
	color: #f3f3f3;
	font-size: large;
	margin: 0;
	user-select: none;
}

.loaderContainer{
	position: absolute;
	top: 20px;
	left: 20px;
	text-align: left;
}

.loaderText {
	display: inline-block;
	vertical-align: middle;
	color: #f3f3f3;
	font-size: 18px;
	margin: 0 10px;
	white-space: nowrap;
	overflow: hidden;
	max-width: 100%;
	user-select: none;
}

.loaderText.complete {
	max-width: 0;
	opacity: 0;
	transition: max-width 700ms linear, opacity 700ms;
}

.loaderCircle {
	display: inline-block;
	border: 5px solid #f3f3f3; /* Light grey */
	border-top: 5px solid darkgrey;
	border-radius: 50%;
	width: 25px;
	height: 25px;
	animation: spin 1500ms linear infinite;
	vertical-align: middle;
}

.loaderCircle.complete {
	border-color: green;
	transition: border 500ms ease-out;
	animation: spin 1200ms linear 1;
}

.loaderCheckmark {
	width: 0;
	height: 0;
	left: 12px;
	top: 17px;
	opacity: 0;
	content: "";
	border-right: 2px solid green;
	border-top: 2px solid green;
	position: absolute;
}

.loaderCheckmark.draw {
	animation-duration: 1300ms;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
	animation-name: drawCheckmark;
	transform-origin: left top;
	transform: scaleX(-1) rotate(135deg);
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes pulse {
	0% { opacity: 1; }
	10% { opacity: 1; }
	50% { opacity: 0.2; }
	90% {opacity: 1; }
	100% {opacity: 1; }
}

@keyframes drawCheckmark {
	0% {
		height: 0;
		width: 0;
		opacity: 0;
	}
	70% {
		height: 0;
		width: 0;
		opacity: 0;
	}
	85% {
		height: 0;
		width: 4px;
		opacity: 1;
	}
	100% {
		height: 9px;
		width: 4px;
		opacity: 1;
	}
}


.overlay {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	z-index: 99;
}

#introduction {
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: 640px;
	transform: translate(-50%, -50%);
	background: $menuDarkColor;
	color: white;
	padding: 25px 35px;
	border: 1px solid;
	border-color: $modelBlackBarColor;
	border-radius: 10px;
	text-align: center;
	font-size: 87%;
}

.definitionText {
	color: $modelWhiteBarColor;
}

.definitionText > h1 {
	color: $modelBlackBarColor;
	font-size: xx-large;
	margin: 0;
}

.definitionText > h2 {
	color: $modelBlackBarColor;
	font-size: x-large;
	margin: 0;
}

.definitionText > .pronunciation {
	font-size: smaller;
}

#introText {
	text-align: left;
}

#introShared {
	display: none;
	flex-direction: column;
	align-items: center;
	padding: 14px 0;
}

#introSharedContent {
	display: inline-block;
	vertical-align: top;
}

#introCanvasContainer {
	display: inline-block;
	vertical-align: top;
	margin: 14px 0;
}

#introSharedText {
	display: inline-block;
	position: relative;
	padding: 0 14px;
	text-align: left;
	vertical-align: top;
	max-width: 390px;
}

#introSharedText > p {
	margin: 14px 0;
}

.overlayButton {
	display: inline-block;
	border: none;
	color: white;
	padding: 9px 27px;
	margin: 0 4px;
	min-width: 110px;
	border-radius: 5px;
	cursor: pointer;
	font-size: 14px;
	text-align: center;
}

.overlayButton:hover {
	opacity: 0.8;
}

#introSharedPlay {
	background: $modelBlackBarColor;
	border: 1px solid $modelBlackBarColor;
}

#introFooter {
	margin: 0;
	font-size: x-small;
	opacity: 0.4;
}

#introFooter a:link {
	color: $modelWhiteBarColor;
}

#introFooter a:visited {
	color: $modelWhiteBarColor;
}

.closeButton {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 30px;
	height: 30px;
	background: none;
	border: none;
	cursor: pointer;
	border-radius: 50%;
	font-size: 0;
	text-align: center;
}

.closeButton::before,
.closeButton::after {
	content: "";
	position: absolute;
	top: 7px;
	left: 14px;
	width: 2px;
	height: 16px;
	background: white;
}

.closeButton::before {
	transform: rotate(45deg);
}

.closeButton::after {
	transform: rotate(-45deg);
}

#settingsOverlay {
	display: none;
}

#settingsMenu {
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: 640px;
	transform: translate(-50%, -50%);
	background: $menuDarkerColor;
	color: white;
	padding: 20px 0;
	border: 1px solid grey;
	border-radius: 10px;
	text-align: center;
}

.settingsContainer {
	position: relative;
	height: 294px;
	padding: 0 20px;
	overflow: hidden;
	overflow-y: scroll;
}

.settingsBlock {
	display: none;
	position: absolute;
	bottom: 20px;
	left: 0;
	width: 100%;
	height: 294px;
	opacity: 0.95;
	background-color: $menuDarkColor;
	z-index: 999;
	justify-content: center;
	align-items: center;
}

.settingsBlockText {
	padding: 42px;
}

.settingsSubContainer {
	margin: 20px 0;
}

.settingsSubContainer:first-child {
	margin-top: 0;
}

.settingsHeader {
	color: $modelBlackBarColor;
	font-size: x-large;
	margin: 10px 0;
}

.settingsSubHeader {
	margin-bottom: 8px;
	text-align: left;
	font-size: 12px;
	color: $menuLightestColor;
}

.textSettingsContainer {
	display: flex;
	margin: 12px 0;
	font-size: 14px;
	justify-content: space-between;
}

#modeSelectionForm {
	margin: 0;
}

.modeOption {
	display: inline-block;
	position: relative;
	vertical-align: top;
}

.modeOption:not(:last-child) {
	margin-right: 14px;
}

.modeBox {
	width: 140px;
	height: 88px;
	padding: 10px 15px;
	background-color: $menuDarkestColor;
	border: 1px solid white;
	border-radius: 5px;
	text-align: left;
	vertical-align: top;
	cursor: pointer;
}

.modeOptionTitle {
	font-size: 15px;
	font-weight: bold;
	color: $modelWhiteBarColor;
}

.modeOptionText {
	font-size: 12px;
}

.modeOption input[type="radio"] {
	appearance: none;
	position: absolute;
	right: 13px;
	top: 13px;
	cursor: pointer;
}

.modeOption input[type="radio"]:checked + .modeBox {
	background-color: $modelBlackBarColor;
}

.modeButtonsContainer {
	text-align: center;
}

#modeCancel {
	background: $menuDarkestColor;
	border: 1px solid white;
}

#modeSelect {
	background: $modelBlackBarColor;
	border: 1px solid $modelBlackBarColor;
}

.tempoSliderContainer {
	display: flex;
	align-items: center;
}

.tempoSlider {
	display: inline-block;
	margin: 0 12px;
	width: 100%;
	accent-color: $whiteColor;
	cursor: pointer;
}

.tempoSlider::-webkit-slider-runnable-track {
	height: 4px;
}

.tempoSlider::-webkit-slider-thumb {
	margin-top: -6px; /* Centers thumb on the track */
}

.tempoSlider:disabled {
	cursor: not-allowed;
}

.tempoInput[type="number"] {
	width: 42px;
	height: 20px;
	color: white;
	background-color: $menuDarkestColor;
	border: 1px solid white;
	border-radius: 5px;
	text-align: center
}

.tempoInput:disabled {
	background-color: $menuDarkColor;
	color: grey;
	cursor: not-allowed;
}

.tempoIcon {
	display: inline-block;
	width: 20px;
	height: 20px;
	background-image: url('../img/tempo.svg');
	background-size: cover;
	user-select: none;
}

.midiDeviceTable {
	border-collapse: collapse;
	width: 100%;
	font-size: 13px;
	border: 1px solid white;
	margin: 16px 0;
}

.midiDeviceTable td, .midiDeviceTable th {
	padding: 8px;
}

.midiDeviceTable th {
	background-color: $menuDarkestColor;
	border-bottom: 1px solid white;
}

.midiDeviceTable tr:nth-child(odd) {
	background-color: $menuDarkColor;
}

.midiDeviceName {
	text-align: left;
}

.midiDeviceEnable {
	text-align: left;
	width: 24px;
}

.checkboxLabel {
	display: grid;
	justify-content: space-evenly;
}

input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	line-height: 18px;
	background-color: $menuLightestColor;
	border: 1px solid white;
	border-radius: 3px;
	cursor: pointer;
	text-align: center;
	display: grid;
	place-content: center;
	-webkit-transition: .3s;
	transition: .3s;
}

input[type="checkbox"]:checked {
	background-color: $modelBlackBarColor;
	border: none;
}

input[type="checkbox"]:checked::before {
	content: '✔';
	display: block;
	color: white;
}

input[type="checkbox"]:disabled {
	background-color: $menuLightColor;
	cursor: not-allowed;
}

#noteBarContainer {
	display: flex;
	justify-content: space-between;
}

.noteBarSection {
	width: 30%;
	margin: 0 1%;
	display: block;
	text-align: center;
	justify-content: center;
}

.noteBar {
	display: inline-block;
	margin: 4px;
	border-radius: 7px;
}

.noteBarSection h4{
	display: block;
	margin: 12px 0;
}

.noteBarWhite {
	width: 48px;
	height: 25px;
}

.noteBarBlack {
	width: 30px;
	height: 25px;
}

.noteBarPlayer.noteBarWhite {
	background-color: $playerWhiteBarColor;
}

.noteBarPlayer.noteBarBlack {
	background-color: $playerBlackBarColor;
}

.noteBarBot.noteBarWhite {
	background-color: $botWhiteBarColor;
}

.noteBarBot.noteBarBlack {
	background-color: $botBlackBarColor;
}

.noteBarModel.noteBarWhite {
	background-color: $modelWhiteBarColor;
}

.noteBarModel.noteBarBlack {
	background-color: $modelBlackBarColor;
}
