:root {
  --color-primary-light: #e0f5c2;
  --color-primary-dark: #2a4c45;

  --color-secondary-light: #a0e7e5;
  --color-secondary-dark: #485c3d;

  --color-accent: #7fffd4;

  --color-white: #ffffff;
  --color-black: #000000;

  --color-bg-light: #ffceb4;
  --color-bg-dark: #1e1e1e;

  --color-text-light: #000000;
  --color-text-dark: #f1f1f1;

  /* Use valid CSS colors instead of transparentize() */
  --color-text-muted-light: rgba(0, 0, 0, 0.4); /* 40% opacity black */
  --color-text-muted-dark: rgba(
    241,
    241,
    241,
    0.4
  ); /* 40% opacity light gray */

  --color-text-deaf-light: rgba(0, 0, 0, 0.6); /* 60% opacity black */
  --color-text-deaf-dark: rgba(241, 241, 241, 0.6); /* 60% opacity light gray */

  --color-elevation-low: #4d5343;
  --color-elevation-medium: rgba(77, 83, 67, 0.4); /* 40% opacity */
  --color-elevation-high: rgba(77, 83, 67, 0.6); /* 60% opacity */

  --primary-color: var(--color-primary-light);
  --secondary-color: var(--color-secondary-light);
  --background-color: var(--color-bg-light);
  --elevation-low: var(--color-elevation-low);

  --text: var(--color-text-light);
  --text-muted: var(--color-text-muted-light);
  --text-deaf: var(--color-text-deaf-light);
  --text-contrast: var(--color-text-dark);
  --text-contrast-muted: var(--color-text-muted-dark);
  --text-contrast-deaf: var(--color-text-deaf-dark);
}

html[bs-theme-mode="dark"] {
  --primary-color: var(--color-primary-dark);
  --secondary-color: var(--color-secondary-dark);
  --background-color: var(--color-bg-dark);
  --elevation-color: var(--color-elevation-medium);
  --text: var(--color-text-dark);
  --text-muted: var(--color-text-muted-dark);
  --text-deaf: var(--color-text-deaf-dark);
  --text-contrast: var(--color-text-light);
  --text-contrast-muted: var(--color-text-muted-light);
  --text-contrast-deaf: var(--color-text-deaf-light);
}

* {
  font-family: "Noto Sans", sans-serif;
}

body {
  background-color: var(--background-color);
}

/* #player-wrapper {
    width: auto;
} */

#mini-player.active {
  height: 15%;
}

#player-interface {
  position: relative;
  aspect-ratio: 9 / 16;
  max-width: 375px;
  width: 100%;
  height: auto;
  background-color: var(--primary-color);
  box-shadow: 20px 20px var(--elevation-low);
}

@media screen and (max-width: 430px) {
  #player-interface {
    height: auto;
    width: 85vw;
  }
}

#sliding-up-panel {
  left: 0;
  right: 0;
  max-height: 10%;
  height: 10%;
  background-color: var(--primary-color);
  transition: height 0.4s cubic-bezier(0.32, 0.72, 0, 1),
    background-color 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

#sliding-up-panel.active {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 85%;
  height: 85%;
  background-color: var(--secondary-color);
}

#sliding-up-panel #panel-body {
  display: none;
}

#sliding-up-panel.active #panel-body {
  display: unset;
}

#sliding-up-panel:not(.active) #panel-body {
  display: none;
}

#slide-handle {
  cursor: pointer;
}

#sliding-up-panel.active #slide-handle span {
  display: block;
  background: var(--elevation-low);
  height: 4px;
}

#tab-titles .nav {
  gap: 0 !important;
}

#tab-titles .btn {
  position: relative;
}

#sliding-up-panel.active #tab-titles .btn::after {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-black);
  height: 2px;
  transform: scaleX(0);
  transition: transform 0.6s cubic-bezier(0.32, 0.72, 0, 1);
}

#sliding-up-panel.active #tab-titles .btn.active::after {
  transform: scaleX(1);
}

#sliding-up-panel.active #tab-titles #up-next-tab.btn::after {
  transform-origin: right;
}

#sliding-up-panel.active #tab-titles #lyrics-tab.btn::after {
  transform-origin: left;
}

.carousel-item {
  transition: transform 0.6s cubic-bezier(0.32, 0.72, 0, 1) !important;
}

/* .material-symbols-outlined.icon-sm {
    font-size: 18px !important;
}
.material-symbols-outlined.icon-md {
    font-size: 28px !important;
}
.material-symbols-outlined.icon-lg {
    font-size: 40px !important;
}
.material-symbols-outlined.icon-xl {
    font-size: 64px !important;
} */

.material-symbols-outlined.icon-sm {
  font-size: 26px !important;
}
.material-symbols-outlined.icon-md {
  font-size: 40px !important;
}
.material-symbols-outlined.icon-lg {
  font-size: 64px !important;
}
.material-symbols-outlined.icon-xl {
  font-size: 96px !important;
}

@media (max-width: 375px) {
  .material-symbols-outlined.icon-sm {
    font-size: 16px !important;
  }
  .material-symbols-outlined.icon-md {
    font-size: 20px !important;
  }
  .material-symbols-outlined.icon-lg {
    font-size: 32px !important;
  }
  .material-symbols-outlined.icon-xl {
    font-size: 48px !important;
  }
}

@media (max-width: 576px) {
  .material-symbols-outlined.icon-sm {
    font-size: 20px !important;
  }
  .material-symbols-outlined.icon-md {
    font-size: 32px !important;
  }
  .material-symbols-outlined.icon-lg {
    font-size: 48px !important;
  }
  .material-symbols-outlined.icon-xl {
    font-size: 72px !important;
  }
}

@media (max-width: 768px) {
  .material-symbols-outlined.icon-sm {
    font-size: 22px !important;
  }
  .material-symbols-outlined.icon-md {
    font-size: 36px !important;
  }
  .material-symbols-outlined.icon-lg {
    font-size: 56px !important;
  }
  .material-symbols-outlined.icon-xl {
    font-size: 88px !important;
  }
}

/* @media (max-width: 992px) {
    .material-symbols-outlined.icon-sm {
        font-size: 26px !important;
    }
    .material-symbols-outlined.icon-md {
        font-size: 40px !important;
    }
    .material-symbols-outlined.icon-lg {
        font-size: 64px !important;
    }
    .material-symbols-outlined.icon-xl {
        font-size: 96px !important;
    }
} */

.material-symbols-outlined.icon-filled {
  font-variation-settings: "FILL" 1 !important;
}
/* .material-symbols-outlined.opsz-20 {
 font-variation-settings: "opsz" 48 !important;
}
    */
.material-symbols-outlined.fw-100 {
  font-variation-settings: "wght" 100;
}

.material-symbols-outlined.fw-200 {
  font-variation-settings: "wght" 200;
}

.material-symbols-outlined.fw-300 {
  font-variation-settings: "wght" 300;
}

.material-symbols-outlined.fw-400 {
  font-variation-settings: "wght" 400;
}

.material-symbols-outlined.fw-500 {
  font-variation-settings: "wght" 500;
}

.material-symbols-outlined.fw-600 {
  font-variation-settings: "wght" 600;
}

.material-symbols-outlined.fw-700 {
  font-variation-settings: "wght" 700;
}

.dragging {
  background-color: var(--color-white);
  opacity: 80%;
}

/* .bg-pink {
    background-color:var(--color-bg-light) !important;
} */

#play-btn #play-circle-btn {
  display: unset;
}

#play-btn #play-circle-btn:active {
  filter: brightness(85%);
  transform: filter 0.8s ease-in-out;
}

#play-btn.playing #play-circle-btn {
  display: none;
}

#play-btn:not(.playing) #play-circle-btn {
  display: unset;
}

#play-btn #pause-circle-btn {
  display: none;
}

#play-btn.playing #pause-circle-btn {
  display: unset;
}

#play-btn.playing #pause-circle-btn:active {
  filter: brightness(85%);
  transform: filter 0.8s ease-in-out;
}

#play-btn:not(.playing) #pause-circle-btn {
  display: none;
}

#up-next-content > .current {
  filter: brightness(90%) !important;
  background-color: var(--elevation-low) !important;
  color: var(--text-contrast) !important;
}

#lyrics-content > span.current {
  color: var(--text) !important;
  transition: all 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

#lyrics-content > span:not(.current) {
  color: var(--text-muted) !important;
}

.square-img {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  /* Optional: set a max-width or max-height if needed */
}
/* 
#shuffle-btn-wrapper.active {
  background-color: var(--color-accent);
}
 */

/* #control-btn-wrapper, #control-btn-wrapper .btn {
  transition: all  ease-in-out !important;
} */