.mixer {
  width: 100%;
  height: 100%;
  background: var(--color-gray-0);
  padding: 30px;
  position: relative;
  z-index: 2;
  gap: 20px;
  border-radius: 10px;
}

.mixer.hidden {
  display: none;
}

.loading-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  background: var(--color-gray-0);
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 14px;
  box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.2);
}

.spinner-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.loading-container.small {
  padding: 20px;
}

.loading-container.large {
  padding: 27px 20px;
  min-width: 210px;
}

.loading-container img {
  width: 20px;
  height: 20px;
}

.loading-container .text {
  font-size: 15px;
  margin-top: 10px;
}

.loading-container .percentage {
  font-size: 15px;
}

.loading-container .cancel {
  font-size: 14px;
  width: 216px;
  height: 56px;
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#file-tab {
  color: var(--N400);
}

#url-tab {
  color: var(--N300);
}

.placeholder-mobile .bar {
  padding: 0 22px;
}

.rotate-first {
  transform: rotate(43deg);
}

.rotate-second {
  transform: rotate(89deg);
}

.rotate-third {
  transform: rotate(133deg);
}

.rotate-fourth {
  transform: rotate(180deg);
}

a.help-link {
  text-decoration: underline;
}

.section {
  margin-top: 25px;
  margin-bottom: 15px;
}

button.effect span {
  font-size: 12px;
}

.effect-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  height: 100%;
  gap: 14px;
}

.effect-container {
  display: flex;
  gap: 12px;
  position: relative;
}

/* Modal Scrollbar styles  */
.body::-webkit-scrollbar {
  width: 20px;
}

.body::-webkit-scrollbar-track {
  background: var(--N200);
  border-left: 2px solid var(--N400);
  border-right: 2px solid var(--N400);
}

.body::-webkit-scrollbar-thumb {
  background: var(--colors-gray-0);
  border: 2px solid var(--N400);
}

/* Up */
.body::-webkit-scrollbar-button:single-button:vertical:decrement {
  width: 20px;
  height: 20px;
  border: 2px solid black;
  border-radius: 4px 4px 0px 0px;
  background: url("/icons/scroll-up.svg") center center no-repeat;
}

/* Down */
.body::-webkit-scrollbar-button:single-button:vertical:increment {
  width: 20px;
  height: 20px;
  border: 2px solid var(--N400);
  border-radius: 0px 0px 4px 4px;
  background: url("/icons/scroll-down.svg") center center no-repeat;
}

.album-title-container span {
  font-size: 14px;
  font-weight: 400;
  color: var(--N300);
}

.mixer .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 87px;
}

.mixer .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 0;
}

.mixer .top .button-container {
  align-self: inherit;
}

.mixer .button-container {
  align-self: flex-end;
  display: flex;
  gap: 12px;
}

.button-container .tools {
  display: flex;
}

.speed-row,
.pitch-row {
  display: flex;
  gap: 12px;
}

button.effect {
  display: flex;
  flex-direction: column;
  width: 64px;
  height: 64px;
  background-color: var(--color-gray-100);
}

.effect-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  visibility: hidden;
  position: absolute;
  background: var(--N000);
  z-index: 10;
  overflow: hidden;
}

.menu-container {
  position: relative;
}

.tools .menu-dropdown {
  top: 50px;
}

.menu-dropdown {
  flex-direction: column;
  position: absolute;
  top: 48px;
  right: -1px;
  background: var(--color-gray-0);
  display: flex;
  cursor: pointer;
  z-index: 10;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #d1d5db;
  height: fit-content;
  width: 240px;
  /* position: relative; */
}

.menu-dropdown.right {
  top: -29px;
  right: -247px;
}

.menu-dropdown.hidden {
  visibility: hidden;
  top: 0;
}

.menu-dropdown.effect {
  right: -34px;
}

.menu-dropdown.full {
  width: 100%;
}

.menu-dropdown .top,
.menu-dropdown.right .top {
  display: none;
  font-weight: 700;
}

.menu-dropdown .top span {
  font-size: 1.25rem;
}

.menu-dropdown,
.effect-dropdown {
  box-shadow: 0 4px 6px -2px rgba(10, 13, 18, 0.03), 0 12px 16px -4px rgba(10, 13, 18, 0.08);
}

.menu-dropdown .option {
  border-radius: 8px;
  align-items: center;
  padding: 8px 10px;
  min-width: 124px;
  position: relative;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  font-weight: 600;
  justify-content: space-between;
  gap: 8px;
}

.menu-dropdown .option.active {
  background: var(--color-pink-100) !important;
}

.menu-dropdown .option.active span {
  color: var(--color-pink-600);
  font-weight: 700;
}

.menu-dropdown .option.button.active svg path {
  stroke: var(--color-pink-600);
}

.menu-dropdown .option .content {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-direction: row;
}

.menu-dropdown .option .content img {
  filter: brightness(0) saturate(100%) invert(10%) sepia(0%) saturate(3552%) hue-rotate(246deg)
    brightness(93%) contrast(98%);
}

.menu-dropdown .option .spacer {
  width: 20px;
  height: 20px;
}

.menu-dropdown .option img {
  width: 16px;
  height: 16px;
}

.menu-dropdown .option.button:hover,
.menu-dropdown .option.checkbox:hover {
  background: var(--color-gray-100);
}

.menu-dropdown .option.text {
  cursor: default;
}

.effect-dropdown {
  width: max-content;
  background: white;
  border-radius: 12px;
  padding: 10px;
  position: absolute;
  border: 1px solid var(--color-gray-300);
  bottom: 72px;
  left: -156px;
  z-index: 5;
}

.effect-dropdown .option {
  display: flex;
  flex-direction: row;
  gap: 10px;
  bottom: 0;
  right: -20px;
  align-items: center;
  padding: 10px 14px;
  font-size: 14px;
}

.effect-dropdown .option:hover {
  background: initial;
}

.effect-dropdown .option .button-content {
  width: 88px;
  display: inherit;
  gap: 8px;
  align-items: center;
}

.effect-dropdown .option .button-content svg {
  width: 20px;
  height: 20px;
}

.effect-dropdown input {
  width: 70px;
}

.effect-dropdown .option span {
  font-weight: 500;
}

.exit {
  background: none;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
}

.exit img {
  width: 16px;
  height: 16px;
}

#wave-container {
  width: 100%;
  display: flex;
  gap: 10px;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
}

.placeholder {
  width: 100%;
  min-height: 49px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1px;
  padding: 11px 0;
  margin-top: 20px;
  position: absolute;
}

.placeholder .bar {
  width: 0.25em;
  height: 0.375em;
  border-radius: 1.4375em;
  background: var(--color-gray-200);
}

#waveform {
  width: 100%;
  display: none;
  cursor: pointer;
}

.time-container {
  display: flex;
  justify-content: space-between;
  padding: 0 20px 20px;
}

.time-container span {
  font-size: 12px;
  font-weight: 500;
}

.current-time {
  width: 70px;
}

.sticky-audio-player .time-container {
  width: 494px;
}

.media-button {
  width: 1.625em;
  height: 1.625em;
}

.lock {
  margin-left: 0;
}

.lock,
.reset-speed,
.reset-pitch {
  min-width: 58px;
  min-height: 58px;
  border: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border: 1px solid var(--N100);
  border-radius: 6px;
  background: white;
  margin-top: 0;
}

.fake-modal {
  position: absolute;
}

#play-pause {
  width: 58px;
  height: 58px;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border: 1px solid var(--N100);
  border-radius: 6px;
  background: white;
}

.effect-tooltip {
  display: flex;
  height: 36px;
  font-size: 8px;
  align-items: center;
}

.effect-title {
  font-size: 6px;
}

.lock-tooltip,
#play-pause-tooltip,
.effect-tooltip,
.reset-speed-tooltip,
.reset-pitch-tooltip {
  height: 36px;
  display: flex;
  align-items: center;
  background: var(--N400);
  color: var(--color-gray-0);
  font-size: 8px;
  border-radius: 5px;
  padding: 14px 16px;
  position: absolute;
  top: -48px;
  z-index: 3;
  white-space: normal;
  overflow: hidden;
  white-space: nowrap;
  visibility: hidden;
  font-size: 8px;
}

.effect-tooltip {
  top: 50px !important;
}

.lock.active {
  background: var(--U200) !important;
}

.lock:hover .lock-tooltip,
#play-pause:hover #play-pause-tooltip,
.reset-speed:hover .reset-speed-tooltip,
.reset-pitch:hover .reset-pitch-tooltip,
.effect-button:hover .effect-tooltip {
  visibility: visible;
  transition-delay: 0.3s;
}

.controls-grid {
  width: 100%;
  max-width: 1172px;
  display: flex;
  align-self: center;
  gap: 12px;
}

.controls-grid .column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.controls-grid .column.stretch {
  width: 100%;
}

.effect-tooltip {
  width: 100%;
  background: var(--N000);
  font-size: 8px;
}

.effect-slider {
  width: 100%;
  height: 2.5px;
  background: linear-gradient(to right, #6b8dff 0%, #ff2a5f 0%, var(--N150) 0%, var(--N150) 100%);
  transition: background 450ms ease-in;
  box-shadow: 2px 8px 13px -3px rgba(116, 114, 114, 0.75);
  appearance: none;
  -webkit-appearance: none;
  -webkit-box-shadow: 2px 8px 13px -3px rgba(116, 114, 114, 0.75);
  -moz-box-shadow: 2px 8px 13px -3px rgba(116, 114, 114, 0.75);
  cursor: pointer;
}

.slider-container {
  display: flex;
  border-radius: 16px;
  background-color: var(--color-gray-100);
  gap: 14px;
}

.slider-container.horizontal {
  padding: 26px 20px;
  flex-direction: row;
  height: 64px;
  justify-content: space-between;
  align-items: center;
}

.slider-container span {
  font-size: 12px;
  font-weight: 600;
}

.slider-container .text-container {
  width: 2.875em;
  display: flex;
  align-items: center;
}

.time-container {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
}

.upload .button-container {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  font-size: 12px;
}

.format-container {
  display: flex;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 9px;
  cursor: pointer;
  background: var(--color-gray-0);
  gap: 6px;
}

.current-format {
  font-size: 12px;
}

.mobile-slider-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: var(--color-gray-100);
  gap: 14px;
  border-radius: 13px;
}

.mobile-slider-container .slider-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile-slider-container .text {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.mobile-slider-container button.tertiary {
  padding: 0;
}

.option-divider {
  border-top: 2px solid var(--N400);
}

.volume {
  display: flex;
  align-items: center;
  width: 58px;
  justify-content: center;
}

.volume .content {
  display: flex;
  align-items: center;
  transform: rotate(270deg);
  gap: 8px;
}

.volume input {
  width: 64px;
}

.volume span {
  transform: rotate(90deg);
}

.volume span.amount {
  width: 15px;
  height: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 3px;
}

::-webkit-slider-thumb {
  appearance: none;
  cursor: pointer;
  width: 12px;
  height: 12px;
  border: none;
  border-radius: 50%;
  background: var(--color-gray-900);
  margin-top: 0.5px;
  box-shadow: none;
}

::-moz-range-thumb {
  border: none;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background: var(--color-gray-900);
  box-shadow: none;
}

.slider {
  width: 100%;
  height: 3px;
  background: linear-gradient(
    to right,
    var(--color-gray-900) 0%,
    var(--color-gray-900) 50%,
    var(--color-gray-300) 50%,
    var(--color-gray-300) 100%
  );
  cursor: pointer;
}

.slider:focus {
  outline-offset: 6px;
}

.file-container {
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px 12px;
}

.file-button {
  display: inherit;
}

.file-button:hover {
  background-color: var(--color-gray-100);
}

/* MARQUEE STYLING */
.song-title-container {
  width: 100%;
  max-width: 100%;
  display: flex;
  gap: 14px;
  overflow: hidden;
}

.song-title {
  white-space: nowrap;
  font-size: 16px;
  cursor: default;
  font-weight: 600;
  display: inline-block;
}

.song-title-container .content {
  display: flex;
  flex-direction: column;
  margin: auto 0;
}

div.song-title {
  display: none;
}

.song-title p {
  display: inline-block;
}

/* .mixer .top:nth-child(2) {
  display: none;
} */

.modal a {
  color: var(--color-pink-600);
}

.modal.more {
  visibility: hidden;
}

.modal p {
  font-size: 14px;
}

.tab-dot {
  width: 5px;
  height: 5px;
  background: black;
  border-radius: 50%;
  visibility: hidden;
}

.playlist-list-container {
  display: none;
}

.song-art-mini {
  width: 2.75em;
  height: 2.75em;
  background: var(--color-gray-100);
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mixer .song-art-mini {
  width: 70px;
  height: 70px;
  overflow: hidden;
}

.song-art-mini img {
  width: 20px;
  height: 20px;
}

.song-art-mini img.full {
  width: auto;
  height: 100%;
}

.song-bar .song-art-mini img.full-vertical {
  width: 100%;
  height: auto;
}

.song-art-mini.filter img {
  filter: brightness(0) saturate(100%) invert(76%) sepia(0%) saturate(1094%) hue-rotate(206deg)
    brightness(96%) contrast(93%);
}

.wave-section {
  display: flex;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  background: var(--color-gray-0);
  border: 1px solid var(--color-gray-300);
  border-radius: 14px;
  height: 7.5625rem;
}

#waveform ::part(cursor) {
  height: 300px;
}

/* @media (max-width: 1045px) {
  #fade-button .effect-modal {
    left: -237px;
  }

  #bass-button .effect-modal {
    left: -162px;
  }
} */

/* #waveform ::part(cursor) {
  height: 500px;
  top: 28px;
  border-radius: 4px;
  border: 1px solid #fff;
}

#waveform ::part(cursor):after {
  content: "🏄";
  font-size: 1.5em;
  position: absolute;
  left: 0;
  top: -28px;
  transform: translateX(-50%);
}

#waveform ::part(marker) {
  background-color: rgba(58, 202, 168, 0.25) !important;
  border: 1px solid #fff;
  padding: 1px;
  text-indent: 10px;
  font-family: fantasy;
  text-decoration: underline;
} */

#waveform ::part(region) {
  height: 7.4375rem;
  background: transparent;
  border: 2px solid var(--color-gray-900);
  border-radius: 0.625em;
}

#waveform ::part(region):before,
#waveform ::part(region):after {
  content: "";
  position: absolute;
  width: 93.75em;
  height: 60px;
  background: white;
  opacity: 0.6;
}

#waveform ::part(region):before {
  /* Need a better way to clip this so it doesn't bleed into region border */
  right: 100.7%;
}

#waveform ::part(region):after {
  /* Need a better way to clip this so it doesn't bleed into region border */
  left: 100.7%;
}

#waveform ::part(scroll) {
  overflow: visible;
}

#waveform ::part(region-handle) {
  background: black;
  border-radius: 30px;
  width: 10px;
  height: 27px;
  top: 45px;
}

#waveform ::part(region-handle-left) {
  left: -7px;
}

#waveform ::part(region-handle-right) {
  right: -7px;
}

@media (max-width: 1278px) {
  .loading-container {
    position: fixed;
  }

  .menu-dropdown.tools .add-to-playlist-option {
    display: none;
  }

  .menu-dropdown.tools .effects-option,
  .menu-dropdown.tools .format-option {
    display: flex;
  }
}

@media (max-width: 820px) {
  .format-container {
    display: none;
  }

  .effect-modal-mobile {
    position: fixed;
    padding: 27px 28px 37px;
    background: white;
    width: 100%;
    bottom: 0px;
    left: 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    z-index: 5;
    flex-direction: column;
    gap: 24px;
    box-shadow: 0px -2px 84px 0px rgba(0, 0, 0, 0.25);
  }

  .effect-modal-mobile .body {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .effect-options-container {
    width: 100%;
    display: flex;
    height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
  }

  .effect-options {
    display: flex;
    font-size: 10px;
    gap: 20px;
    overflow: scroll;
  }

  .effect-options button {
    display: flex;
    align-items: center;
    padding: 14px 0;
    gap: 10px;
    background: white;
    border: none;
  }

  .effect-options button span {
    font-size: 10px !important;
    margin-top: 3px;
    white-space: nowrap;
  }

  .effect-tooltip-mobile {
    display: flex;
    gap: 12px;
    font-size: 9px;
  }

  .effect-tooltip-mobile .slider-container-mobile {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--N100);
    padding: 11px 20px;
    align-items: end;
    gap: 15px;
  }

  .effect-tooltip-mobile input {
    margin: 5px 0;
  }

  .effect-tooltip-mobile div input {
    width: inherit;
  }

  .effect-tooltip-mobile button {
    padding: 18px;
    border: none;
  }

  .lock-tooltip,
  #play-pause-tooltip,
  .upload-text {
    display: none;
  }

  img.upload-image {
    margin-right: 0px;
  }

  .volume.slider-container,
  .effect-section {
    display: none;
  }

  .format-menu {
    width: 100%;
    padding: 27px 20px 37px;
    position: fixed;
    bottom: 0;
    left: 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: none;
    display: none;
  }

  .format-menu .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
  }

  .format-menu img {
    margin: 0;
  }

  .format-menu span {
    line-height: initial;
  }

  .format-menu .exit {
    padding: 20px;
  }

  .modal.more a {
    font-size: 10px;
    padding: 20px;
    width: 100%;
    align-items: center;
  }

  .modal.more a:hover {
    background: var(--U200) !important;
  }
}

@media (max-width: 623px) {
  .main {
    overflow: initial;
  }

  .mixer {
    height: 100%;
    border-radius: 0;
  }

  .mixer .header {
    margin-bottom: 1.875em;
  }

  .mixer .top .secondary > span {
    display: none;
  }

  .slider-container.horizontal {
    height: 64px;
    padding: 15px 20px;
    flex-direction: column;
  }

  .slider-container.horizontal .text-container {
    width: 100%;
    justify-content: space-between;
  }

  .controls-grid {
    gap: 0.75em;
  }

  .controls-grid .column {
    gap: 0.875em;
  }

  .mixer .button-container {
    gap: 14px;
  }

  .menu-dropdown {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 30px;
    z-index: 5;
    border-radius: 14px 14px 0 0;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
  }

  .menu-dropdown .top,
  .menu-dropdown.right .top {
    display: flex;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .menu-dropdown .option {
    padding: 12px 0;
    /* gap: 8px; */
    padding: 8px 0;
    font-size: 1em;
  }

  .menu-dropdown .option .checkbox-container svg {
    width: 12px;
    height: 12px;
  }

  #wave-container ::part(cursor) {
    display: none;
  }

  #wave-container {
    height: 100%;
    overflow: visible;
  }

  .menu-dropdown {
    top: initial;
  }
}

@media (max-width: 375px) {
  .mixer .top:nth-child(1) {
    height: initial;
  }

  .upload-button-container {
    height: 36px;
  }
}

@media (max-width: 280px) {
  .mixer .top {
    flex-direction: column;
    align-items: start;
    gap: 19px;
  }
}

/* ------------ Animations ------------ */
@keyframes tooltipAppear {
  0% {
    display: none;
  }

  100% {
    display: block;
  }
}