@use '../cuesheetRows' as rows;
@include rows.cuesheet-row-columns;

.milestoneRow {
  background: color-mix(in srgb, transparent 98%, var(--user-bg, $gray-500) 2%);
  border-left: 4px solid var(--user-bg, $gray-500);

  font-style: italic;

  &:hover {
    outline: 1px solid $blue-500;
    outline-offset: -1px;
    background: color-mix(in srgb, transparent 80%, var(--user-bg, $gray-500) 20%);
  }

  td {
    background-color: $gray-1250;
    border-radius: 2px;
  }

  .indexColumn {
    color: $label-gray;
  }
}