ontime/apps/client/src/common/components/schedule/Schedule.scss

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

.schedule {
  width: 100%;
  border-spacing: 50px;

  .entry {
    font-size: clamp(16px, 1.5vw, 24px);

    .entry-colour {
      background-color: var(--card-background-color-override, $viewer-card-bg-color);
      height: clamp(8px, 0.75vw, 12px);
      width: clamp(8px, 0.75vw, 12px);
      border-radius: 6px;
      display: inline-block;
    }

    .entry-times {
      font-family: $viewer-font-family;
      color: var(--secondary-color-override, $viewer-secondary-color);
      font-weight: 300;
      letter-spacing: 0.05em;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .entry-title {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .entry-secondary {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &:not(:last-child) {
      padding-bottom: 8px;
    }

    &--past {
      color: var(--secondary-color-override, $viewer-secondary-color);
    }

    &--now {
      .entry-title {
        color: var(--accent-color-override, $accent-color);
        font-weight: 600;
      }
    }

    &.skip {
      text-decoration: line-through;
    }
  }
}

.schedule-nav {
  display: flex;
  justify-content: flex-end;

  .schedule-nav__item {
    background-color: var(--card-background-color-override, $viewer-card-bg-color);
    width: 12px;
    height: 12px;
    border-radius: 6px;
    margin-left: 8px;

    &--selected {
      background-color: var(--color-override, $viewer-color);
    }
  }
}