@use '@/theme/viewerDefs' as *;

.title-card {
  position: relative;
  display: flex;
  flex-direction: column;
}

.title-card__title,
.title-card__placeholder {
  font-weight: 600;
  font-size: $title-font-size;
  line-height: 1.2em;
}

.title-card__title {
  color: var(--color-override, $viewer-color);
  padding-right: 1em;
  min-height: 1.2em;
}

.title-card__placeholder {
  color: var(--label-color-override, $viewer-label-color);
}

.title-card__secondary {
  font-size: $base-font-size;
  color: var(--secondary-color-override, $viewer-secondary-color);
  line-height: 1.2em;
}

.title-card__label {
  position: absolute;
  right: 1rem;
  top: 0.5rem;
  font-size: $timer-label-size;
  color: var(--secondary-color-override, $viewer-secondary-color);
  text-transform: uppercase;

  &--accent {
    color: var(--accent-color-override, $accent-color);
  }
}