[data-dezeen-spotify-miniplayer] [data-spotify-embed],
[data-dezeen-spotify-miniplayer] iframe {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.dezeen-spotify-miniplayer {
  --_progress: 0%;
  --_player-loading-color: rgba(0, 0, 0, 0.15);

  --_player-width: 100%;
  --_player-gap: 12px;

  --_player-controls-gap: 10px;
  --_player-controls-padding: 0rem;

  --_player-title-lines: 3;
  --_player-title-font-size: 18px;
  --_player-title-font-weight: 500;
  --_player-title-line-height: 1.25;
  --_player-title-letter-spacing: 0em;

  --_player-btn-size: 20px;
  --_player-btn-bg: transparent;
  --_player-btn-color: #000000;
  --_player-btn-border: none;
  --_player-btn-icon-size: 80%;

  --_player-time-font-size: 12px;
  --_player-time-letter-spacing: 0em;
  --_player-time-font-weight: 500;

  --_player-progress-bg: #000000;
  --_player-progress-thumb-size: 3px;
  --_player-progress-thumb-color: transparent;
  --_player-progress-thumb-border: none;
  --_player-progress-thumb-radius: 0%;
  --_player-progress-track-height: var(--_player-progress-thumb-size);
  --_player-progress-track-bg: #b3b3b3;
  --_player-progress-track-radius: 0px;
  --_player-progress-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.3);
  --_player-progress-disabled-opacity: 0.5;

  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: var(--player-gap, var(--_player-gap));
  width: var(--player-width, var(--_player-width));
  max-width: 100%;
}

.dezeen-spotify-miniplayer__thumbnail {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center center;
}

.dezeen-spotify-miniplayer__thumbnail:not([src]) {
  background-color: var(--player-loading-color, var(--_player-loading-color));
  animation: dezeenSpotifyLoading 0.8s ease-in-out infinite alternate;
}

.dezeen-spotify-miniplayer__title {
  margin: 0;
  position: relative;
  display: block;
  display: -webkit-box;
  line-clamp: var(--player-title-lines, var(--_player-title-lines));
  -webkit-line-clamp: var(--player-title-lines, var(--_player-title-lines));
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: var(--player-title-line-height, var(--_player-title-line-height));
  font-size: var(--player-title-font-size, var(--_player-title-font-size));
  font-weight: var(--player-title-font-weight, var(--_player-title-font-weight));
  letter-spacing: var(--player-title-letter-spacing, var(--_player-title-letter-spacing));
  min-height: calc(
    1em * var(--player-title-line-height, var(--_player-title-line-height)) *
      var(--player-title-lines, var(--_player-title-lines))
  );
}

.dezeen-spotify-miniplayer__title:empty::after {
  --_single-line-height: calc(1em * var(--player-title-line-height, var(--_player-title-line-height)));

  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to bottom, var(--player-loading-color, var(--_player-loading-color)) 75%, transparent 75%),
    linear-gradient(to bottom, var(--player-loading-color, var(--_player-loading-color)) 75%, transparent 75%),
    linear-gradient(to bottom, var(--player-loading-color, var(--_player-loading-color)) 75%, transparent 75%);
  background-size:
    100% var(--_single-line-height),
    80% var(--_single-line-height),
    60% var(--_single-line-height);
  background-position:
    0 0,
    0 var(--_single-line-height),
    0 calc(var(--_single-line-height) * 2);

  background-repeat: no-repeat;
  animation: dezeenSpotifyLoading 0.8s ease-in-out infinite alternate;
  animation-delay: 0.2s;
}

.dezeen-spotify-miniplayer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--player-controls-gap, var(--_player-controls-gap));
  padding: var(--player-controls-padding, var(--_player-controls-padding));
}

.dezeen-spotify-miniplayer__playpause {
  flex-grow: 0;
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: inherit;
  letter-spacing: inherit;
  line-height: 1;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1 / 1;
  width: var(--player-btn-size, var(--_player-btn-size));
  height: var(--player-btn-size, var(--_player-btn-size));
  background-color: var(--player-btn-bg, var(--_player-btn-bg));
  color: var(--player-btn-color, var(--_player-btn-color));
  border: var(--player-btn-border, var(--_player-btn-border));
}

.dezeen-spotify-miniplayer__icon {
  color: currentColor;
  width: var(--player-btn-icon-size, var(--_player-btn-icon-size));
  height: var(--player-btn-icon-size, var(--_player-btn-icon-size));
}

.dezeen-spotify-miniplayer__playpause[data-playing='true'] .dezeen-spotify-miniplayer__icon--play,
.dezeen-spotify-miniplayer__playpause[data-playing='true'] .dezeen-spotify-miniplayer__icon--play,
.dezeen-spotify-miniplayer__playpause:not([data-playing]) .dezeen-spotify-miniplayer__icon--pause,
.dezeen-spotify-miniplayer__playpause[data-playing='false'] .dezeen-spotify-miniplayer__icon--pause {
  display: none !important;
}

.dezeen-spotify-miniplayer__playpause:not([data-playing]) .dezeen-spotify-miniplayer__icon--play,
.dezeen-spotify-miniplayer__playpause[data-playing='true'] .dezeen-spotify-miniplayer__icon--pause {
  display: block !important;
}

.dezeen-spotify-miniplayer__progress {
  min-width: 0;
  flex-grow: 1;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent;
  cursor: pointer;
  margin: 0;
}

.dezeen-spotify-miniplayer__progress:disabled {
  cursor: auto;
  opacity: var(--player-progress-disabled-opacity, var(--_player-progress-disabled-opacity));
}

.dezeen-spotify-miniplayer__progress:disabled::-webkit-slider-thumb {
  opacity: 0 !important;
}

.dezeen-spotify-miniplayer__progress:disabled::-moz-range-thumb {
  opacity: 0 !important;
}

.dezeen-spotify-miniplayer__progress:focus {
  outline: none;
}

.dezeen-spotify-miniplayer__progress:focus-visible::-webkit-slider-thumb {
  box-shadow: var(--player-progress-focus-ring, var(--_player-progress-focus-ring));
}

.dezeen-spotify-miniplayer__progress:focus-visible::-moz-range-thumb {
  box-shadow: var(--player-progress-focus-ring, var(--_player-progress-focus-ring));
}

.dezeen-spotify-miniplayer__progress::-webkit-slider-runnable-track {
  width: 100%;
  height: var(--player-progress-track-height, var(--_player-progress-track-height));
  border-radius: var(--player-progress-track-radius, var(--_player-progress-track-radius));

  background: linear-gradient(
    to right,
    var(--player-progress-bg, var(--_player-progress-bg)) var(--progress, var(--_progress)),
    var(--player-progress-track-bg, var(--_player-progress-track-bg)) 0
  );
}

.dezeen-spotify-miniplayer__progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: var(--player-progress-thumb-size, var(--_player-progress-thumb-size));
  width: var(--player-progress-thumb-size, var(--_player-progress-thumb-size));
  background: var(--player-progress-thumb-color, var(--_player-progress-thumb-color));
  border: var(--player-progress-thumb-border, var(--_player-progress-thumb-border));
  border-radius: var(--player-progress-thumb-radius, var(--_player-progress-thumb-radius));
  margin-top: calc(
    (
        var(--player-progress-track-height, var(--_player-progress-track-height)) -
          var(--player-progress-thumb-size, var(--_player-progress-thumb-size))
      ) /
      2
  );
}

.dezeen-spotify-miniplayer__progress::-moz-range-track {
  width: 100%;
  height: var(--player-progress-track-height, var(--_player-progress-track-height));
  background: var(--player-progress-track-bg, var(--_player-progress-track-bg));
  border-radius: var(--player-progress-track-radius, var(--_player-progress-track-radius));
}

.dezeen-spotify-miniplayer__progress::-moz-range-progress {
  height: var(--player-progress-track-height, var(--_player-progress-track-height));
  background: var(--player-progress-bg, var(--_player-progress-bg));
  border-radius: var(--player-progress-track-radius, var(--_player-progress-track-radius));
}

.dezeen-spotify-miniplayer__progress::-moz-range-thumb {
  box-sizing: border-box;
  height: var(--player-progress-thumb-size, var(--_player-progress-thumb-size));
  width: var(--player-progress-thumb-size, var(--_player-progress-thumb-size));
  background: var(--player-progress-thumb-color, var(--_player-progress-thumb-color));
  border: var(--player-progress-thumb-border, var(--_player-progress-thumb-border));
  border-radius: var(--player-progress-thumb-radius, var(--_player-progress-thumb-radius));
}

.dezeen-spotify-miniplayer__time {
  flex-grow: 0;
  white-space: nowrap;
  line-height: 1;
  margin: 0;
  user-select: all;
  font-size: var(--player-time-font-size, var(--_player-time-font-size));
  font-weight: var(--player-time-font-weight, var(--_player-time-font-weight));
  letter-spacing: var(--player-time-letter-spacing, var(--_player-time-letter-spacing));
}

@keyframes dezeenSpotifyLoading {
  to {
    opacity: 0.2;
  }
}