/*
 * Song-Relation Labels
 */

/* #### VARIABLES #### */

:root {
  --label-color-cover: #ea5c33;
  /* Cover, Original              */
  --label-color-alternative: #f29a7b;
  /* Alternativversion            */
  --label-color-medley: #F8AF43;
  /* Medley             */
  --label-color-quote: #1d8386;
  /* Zitat */
  --label-color-sample: #22863e;
  /* Sample             */
  --label-color-cooriginal: #8d238d;
  /* Co-Original, Werk      */
  --label-color-classical: #afbf9f;
  /* Werkteil, Übergeordnetes Werk */

  --label-text-color: #ffffff;
  --label-text-color-dark: #000000;
  /* for better contrast on light backgrounds   */
}

[data-bs-theme=dark] {
  --label-text-color: var(--label-text-color-dark);
}


/* #### GENERAL CLASS #### */

.song-label {
  display: inline-block;
  border-radius: 0.5em;
  font-size: 1rem;
  font-weight: 400;
  font-family: 'Raleway', sans-serif;
  line-height: 25px;
  padding: 0 7px;
  white-space: nowrap;
  vertical-align: middle;
  min-width: 5.75rem;
  max-width: 8.25rem;
  text-align: center;
  color: var(--label-text-color);
}


/* #### COLORS OF THE DIFFERENT LABELS #### */

.song-label--cover,
.song-label--original {
  background-color: var(--label-color-cover);
}

.song-label--original_alt,
.song-label--alternative,
.song-label--alternativversion {
  background-color: var(--label-color-alternative);
  color: var(--label-text-color-dark);
}

.song-label--medley,
.song-label--medley_quelle,
.song-label--medley_source {
  background-color: var(--label-color-medley);
  color: var(--label-text-color-dark);
}

.song-label--zitat,
.song-label--zitat_quelle,
.song-label--quote,
.song-label--quote_source {
  background-color: var(--label-color-quote);
}

.song-label--sample,
.song-label--sample_quelle,
.song-label--sample_source {
  background-color: var(--label-color-sample);
}

.song-label--co_original,
.song-label--werk,
.song-label--work {
  background-color: var(--label-color-cooriginal);
}

.song-label--werkteil,
.song-label--work_part,
.song-label--u_werk,
.song-label--p_work {
  background-color: var(--label-color-classical);
  color: var(--label-text-color-dark);
}

/* #### Formatting of Headings on the Song-Relations Help Page #### */

h3.label-definition {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
  /*   max-width: 320px;
 */
  font-size: inherit;
  font-weight: inherit;
  margin: 1.5rem 0 1.5rem;
}

h3.label-definition .song-label:first-child {
  justify-self: end;
}

h3.label-definition .song-label:last-child {
  justify-self: start;
}

h3.label-definition img {
  display: block;
}

@media (max-width: 435px) {
  h3.label-definition {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  h3.label-definition .song-label:first-child,
  h3.label-definition .song-label:last-child {
    justify-self: center;
  }
}