.player-elements {
  /* --player-height: 0; */
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1020;
  height: var(--player-height);
  /* width: 100vw;
  max-width: 104vw !important; */

  display: inline-flex;
  opacity: 0;
  transform: translateY(calc(var(--player-height) * 1));

  transition-behavior: allow-discrete;
  transition-property: display, transform, opacity;
  transition-duration: calc(var(--speed) * 1);
  transition-timing-function: var(--ease-out);
  justify-content: center;
}

.player-elements.show {
  /* --player-height: fit-content; */
  display: inline-flex;
  opacity: 1;
  transform: translateY(calc(var(--player-height) * 0));

  transition-behavior: allow-discrete;
  transition-property: display, transform, opacity;
  transition-duration: calc(var(--speed) / 2);
  transition-timing-function: var(--ease-in-snap);
}

.player-component {
  backdrop-filter: blur(10px);
  background-color: color-mix(in srgb, var(--bs-secondary-bg), transparent 40%);

  /* padding-inline: calc(var(--bs-gutter-x) / 4 + var(--container-margins));
  width: 100%;
  max-width: var(--content-width); */

  padding-block: calc(var(--gap) / 2);
  /* display: flex;
  flex-wrap: wrap;
  align-items: center; */

  place-content: center;
}

.player-content {
  max-width: var(--content-width);
  padding-inline: calc(var(--bs-gutter-x) / 2 + var(--container-margins));

  /* max-height: 100%;
  overflow: clip; */

  /* flex: 0 0 50%; */

  /* display: flex;
  align-items: center;
  gap: calc(var(--gap) / 2); */

  display: flex;

  .actor-card-image-container {
    max-width: 4rem;
    flex: 0 1 auto;
  }
}

.player-information {
  width: 100%;
  display: inline-flex;
  gap: calc(var(--gap) / 2);
  align-items: center;
  flex-wrap: wrap;
}

.player-details {
  display: flex;
  /* flex-wrap: wrap; */
  flex: 1 1 28rem;
  gap: calc(var(--gap) / 2);
  align-items: center;
}

.active-sample-titles {
  flex: 1 1 8rem;
}

.active-actor-name {
  line-height: 1.1;
}

.player-actions {
  display: flex;
  /* width: 100%; */
  align-items: center;
  justify-content: space-evenly;
  flex: 1 1 10rem;
  gap: calc(var(--gap) / 2);
}

.player-volume {
  display: flex;
  margin-inline-end: 2rem;
  & input {
    min-width: 2rem;
    max-width: 4rem;
    width: 100%;
  }
}

/* .volume-icon {
  display: none;
}
.volume-icon-container {
  cursor: pointer;
}

[data-volume-level="mute"] .volume-mute,
[data-volume-level="low"] .volume-low,
[data-volume-level="medium"] .volume-mid,
[data-volume-level="high"] .volume-high {
  display: inline-block;
} */

#waveform {
  /* width: 100%;
  min-width: 1rem;
  display: flex; */
  flex: 1 1 45%;
  margin-block: calc(var(--gap) / 2);
  align-content: center;

  & div:first-child {
    width: 100%;
    min-width: 2rem;
  }
}

.close-player-container {
  width: 0;
  z-index: 999;
}

.player-close {
  /* top: 0;
  float: inline-end; */

  /* margin-inline-start: 1rem; */
  float: right;
}

/* .active-sample-titles {
  max-width: 40vw;
}

.active-actor-name,
.active-sample-name {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-inline-end: 3ch;
  text-align: start;
} */

/* #waveform {
  width: 100%;
  min-width: 1rem;
}

.player-close {
  align-self: flex-start;
}

.player-elements {
  @media only screen and (max-width: 976px) {
    --player-height: fit-content;
  }

  .player-actions {
    flex-wrap: wrap;
  }

  .actor-card-image-container {
    max-width: 4rem;
    flex: 0 1 auto;
  }
} */
@media only screen and (max-width: 1000px) {
  .player-elements {
    --player-height: 12rem;
  }
}
@media only screen and (max-width: 460px) {
  .player-content {
    .player-details {
      flex-wrap: wrap;
    }
    /* .actor-card-image-container, */
    .player-volume {
      display: none;
    }
  }
}