src/modules/profile/topArtists/topArtists.css
:root {
  --gradient-angle: -45deg;
  --gradient-angle-abs: calc(max(var(--gradient-angle), var(--gradient-angle) * -1));
  --gradient-angle-sin-raw: sin(var(--gradient-angle-abs));
  --gradient-angle-sin: calc(max(var(--gradient-angle-sin-raw), var(--gradient-angle-sin-raw) * -1));
  --gradient-size: 40px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes move-gradient {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 56px 0;
  }
}

.top-artists-fade-in {
  opacity: 0;
  animation: fadeIn 0.5s forwards;
}

.top-artists {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: 14px;

  &.is-empty {
    align-items: center;

    &:before {
      content: 'No artists found for the selected period';
      padding: 10px;
    }
  }

  & > .loader {
    color: var(--color-lastfm);
    width: 182px;
    min-height: calc(38px * var(--config-top-artists-limit));
    align-self: center;
  }

  &.is-loaded {
    & > .loader { display: none; }
  }
}

.top-artist {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: calc(var(--playcountPercentage) * 1%);
  min-width: calc(var(--playcountPercentage) * 1%);
  border-radius: 6px;
  position: relative;
  border-top: 5px solid;
  box-sizing: border-box;
  cursor: pointer;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  align-items: stretch;
  font-weight: bold;
  box-shadow: inset 0 5px 10px -5px rgba(0, 0, 0, .1), inset 0 -5px 10px -5px rgba(255, 255, 255, .05);
  will-change: background-color, border-color, transform;
  line-height: 1;
  background-color: hsl(var(--hue), 60%, 20%);
  border-color: rgba(0, 0, 0, 0.4);

  transition-property: background-color, border-color, transform, flex-basis, min-width;
  transition-duration: .15s, .15s, .15s, 0.5s, 0.5s;
  transition-timing-function: ease-in-out;

  &:before {
    content: '';
    position: absolute;

    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: repeating-linear-gradient(
      var(--gradient-angle),
      rgba(0, 0, 0, 7%),
      rgba(0, 0, 0, 7%) calc(var(--gradient-size) / 2),
      transparent calc(var(--gradient-size) / 2),
      transparent var(--gradient-size)
    );
    background-size: calc(var(--gradient-size) / var(--gradient-angle-sin)) 100%;
    background-position: 0 0;
  }

  &:hover:before {
    animation: move-gradient 2s linear infinite;
  }

  & > * {
    padding: 8px 15px 10px;
    position: relative;
    z-index: 1;
  }

  &:hover {
    background-color: hsl(var(--hue), 55%, 25%);
  }

  .artist-scrobbles {
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
  }

  .artist-name {
    flex-grow: 1;
    text-align: left;
    text-decoration: none;
    color: inherit;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
  }

  &:hover { color: white; }
}

html[data-scheme="light"] {
  .top-artist {
    background-color: hsl(var(--hue), 50%, 80%);
    color: black;
    border-color: rgba(255, 255, 255, 0.1);

    &:hover {
      color: black;
      background-color: hsl(var(--hue), 55%, 90%);
    }

    &::after {
      background: rgba(255,255,255,.5);
    }

    .artist-name {
      text-shadow: 0 1px 1px rgba(255, 255, 255, .5);
    }

    .artist-scrobbles {
      background-color: rgba(255, 255, 255, 0.3);
    }
  }

  .top-artists::after {
    background: rgba(255, 255, 255, .5);
  }
}

.artist-scrobbles {
  font-size: 0.8em;
  margin-left: 0.5em;
}

.top-artists::after {
  content: '';
  inset: 0;
  display: none;
  background: rgba(0,0,0,.5);
  position: absolute;
}

.top-artists.is-loading::after { display: block; }

.top-artists-header {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;

  & > div {
    display: flex;
    gap: 10px;
    align-items: stretch;
  }

  button, select { cursor: pointer; }

  button {
    background: var(--surface-primary);
    border-radius: 3px;
    padding: .15em .5em;
    color: var(--text-primary);
    border: 1px solid var(--ui-detail-neutral);
    font-size: 16px;
  }
}

#top-artists-period-label::before { content: '('; }
#top-artists-period-label::after { content: ')'; }
