.tags-container {
  display: flex;
  gap: var(--ym-spacer-size-xxxs);
  align-items: center;
  flex-wrap: wrap;
}

.tag {
  --color-tag: var(--ym-controls-color-primary-text-enabled);
  color: var(--color-tag);
  
  position: relative;

  border-radius: var(--ym-radius-size-xs);
  padding: var(--ym-spacer-size-xxxs) var(--ym-spacer-size-xs);
  transition: var(--transition);

  user-select: none;
  cursor: pointer;
  white-space: nowrap;
}

.tag.rap {
  --color-tag: var(--color-rap);
}
.tag.rock {
  --color-tag: var(--color-rock);
}
.tag.metal {
  --color-tag: var(--color-metal);
}
.tag.electronic {
  --color-tag: var(--color-electronic);
}
.tag.pop {
  --color-tag: var(--color-pop);
}
.tag.rnb {
  --color-tag: var(--color-rnb);
}
.tag.folk {
  --color-tag: var(--color-folk);
}
.tag.classical {
  --color-tag: var(--color-classical);
}
.tag.alternative {
  --color-tag: var(--color-alternative);
}
.tag.podcast {
  --color-tag: var(--color-podcast);
}
.tag.soundtrack {
  --color-tag: var(--color-soundtrack);
}
.tag.children {
  --color-tag: var(--color-children);
}
.tag.reggae {
  --color-tag: var(--color-reggae);
}
.tag.other {
  --color-tag: var(--ym-controls-color-primary-text-enabled);
}

.tags-container.overlay-tags-container {
  flex-direction: column;
  height: 50vh;
  align-items: flex-start;
  overflow-x: auto;
  flex-wrap: nowrap;
}

.tag.selected {
  color: var(--ym-background-color-primary-enabled-popover);
  background-color: var(--color-tag);
}