.player-elements {
  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 {
  display: inline-flex !important;
  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(--body-width);
}

.player-content {
  max-height: 100%;
  overflow: clip;
}

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

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

.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;
}