@import "./variables.module.css";
.genre-container {
  display: flex;
  overflow-x: none;
  background-color: var(--secondary-background-color);
  padding: 20px;
  border-radius: 8px;
  color: white;
  margin-bottom: 20px;
  width: 100%;
  height: 100%;
}

.radial-tooltip {
  background-color: black;
  border-radius: 8px;
  padding: 10px;
}

.radial-tooltip > p {
  padding: 0px !important;
  margin: 0px !important;
}

.radial-tooltip > .tooltip-header {
  color: var(--secondary-color);
}

.genre-stats {
  width: 90%;
  height: 400px;
}

.genre-container::-webkit-scrollbar {
  width: 5px; /* set scrollbar width */
}

.genre-container::-webkit-scrollbar-track {
  background-color: transparent; /* set track color */
}

.genre-container::-webkit-scrollbar-thumb {
  background-color: #8888884d; /* set thumb color */
  border-radius: 5px; /* round corners */
  width: 5px;
}

.genre-container::-webkit-scrollbar-thumb:hover {
  background-color: #88888883; /* set thumb color */
}
