.active-user-card {
  background: var(--elevation-layer1);
  border: 1px solid var(--elevation-layer3);
  border-radius: 0.375rem;

  &:hover {
    background: var(--elevation-layer2);
  }
}

.user-avatar {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;

  img {
    object-fit: cover;
  }
}

.username {
  font-size: 1rem;
  color: var(--body-text-color);
}

.hours-period {
  flex-shrink: 0;
}

.hours-value {
  font-size: 1.25rem;
  font-weight: 600;
}

.hours-label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted-color);
}

.series-covers {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--primary-color-scrollbar) var(--default-state-scrollbar);
}

.series-cover-wrapper {
  flex-shrink: 0;
}

.series-cover {
  width: 3.75rem;
  height: 5.625rem;
  border-radius: 0.25rem;
  object-fit: cover;
  background: var(--elevation-layer3);

  &--placeholder {
    color: var(--text-muted-color);
    font-size: 1.25rem;
  }
}

.stats-row {
  font-size: 0.8125rem;
  color: var(--text-muted-color);
}

.stat-divider {
  margin: 0 0.5rem;
  opacity: 0.4;
}
