pspotify-p {
  display: block;
  position: relative;
  margin: 0;

  aspect-ratio: 3/1;
  /* Needed for height! */
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  background-color: light-dark(white, #181818);
  box-shadow: 3px 3px 5px 0px hsla(from var(--black) h s l / 0.3);
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    box-shadow:
      inset 0px -10px 25px -10px var(--spt-shadow-dark),
      inset 0px 15px 20px -10px var(--spt-shadow-darker);
    z-index: 1;
  }

  &:focus-within {
    outline: 2px solid orange;
  }
}

pspotify-p a {
  position: absolute;
  inset: 0;
  display: block;
}

pspotify-p img {
  height: 100%;
  object-fit: cover;
  display: block;
  min-width: 0;
  min-height: 0;
}

@supports (background: -webkit-named-image(i)) {ű
  /* I hate safari */
  pspotify-p img {
    scale: 0.82;
    width: unset !important;
    max-width: unset !important;
    height: unset !important;
    transform-origin: top left;
    position: absolute;
    top: 0;
    left: 0;
  }
}

#spotify-light {
  display: none;
}

html#light {
  pspotify-p {
    position: relative;

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 50%;

      background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0)
      );
      border-radius: 16px 16px 0 0;
      pointer-events: none;
      z-index: 2;
    }
  }

  #spotify-dark {
    display: none;
  }
  #spotify-light {
    display: block;
  }
}