.column {
  height: 100%;
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: end;
  gap: 2px;
}

.row {
  display: grid;
  grid-template-columns: 3rem 9rem 9rem;
  align-items: center;
  gap: 0.5rem;
}

.row2 {
  display: grid;
  grid-template-columns: 3rem 9rem;
  align-items: center;
  gap: 0.5rem;
}

.metadataRow {
  display: grid;
  grid-template-columns: minmax(3rem, 10rem) 8rem 8rem;
  align-items: center;
  gap: 0.5rem;
}

.labelledElement {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.icon {
  font-size: 1rem;
  color: $secondary-text-gray;
  flex-shrink: 0;
}

.label {
  color: $label-gray;
  font-size: calc(1rem - 2px);
  text-align: right;
}

.time {
  font-size: 1.25rem;
  letter-spacing: 0.25px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.daySpan {
  display: inline-flex;
  align-items: center;
  margin-left: 0.25rem;
  
  &::after {
    content: "+" attr(data-day-offset);
    font-size: 0.75rem;
    font-weight: 400;
    color: $ui-white;
    background: $gray-900; // same as the tag component
    padding: 0.125rem 0.25rem;
    border-radius: $component-border-radius-sm;
  }
}

.muted {
  color: $muted-gray;
}

.labelTitle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  color: $active-indicator;
  font-size: calc(1rem - 2px);
  text-align: right;
}

.dueTime {
  text-transform: capitalize;
  font-size: 1rem;
  letter-spacing: 0;
  color: $playback-over;
  border-left: 3px solid $playback-over;
  padding-left: 0.375rem;
  display: inline-block;
}