ontime/apps/client/src/features/cuesheet/cuesheet-table-header/CuesheetTableHeader.module.scss

$label-colour: $gray-700;
$active-colour: $gray-500;

@mixin label {
  font-size: $inner-section-text-size;
  color: $label-colour;
  text-align: center;
  align-self: end;
}

@mixin time {
  font-family: 'Open Sans Light', $ontime-font-family;
  font-size: 2rem;
  text-align: center;
}

.header {
  grid-area: header;
  display: grid;
  width: 100%;
  padding: 0.25rem 1rem;
  height: max-content;
  column-gap: 2rem;

  grid-template-areas: 'event playback timer clock actions';
  grid-template-columns: 1fr auto auto auto auto;
  align-items: center;
  justify-items: center;
}

.event {
  grid-area: event;
  justify-self: start;

  .title {
    font-size: 1.75rem;
  }

  .eventNow {
    justify-self: start;
    font-size: 1.5rem;
  }
}

.playback {
  grid-area: playback;
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;

  .playbackLabel {
    @include label;
  }

  svg {
    font-size: 2rem;
    height: 3rem;
    color: $label-colour;
  }
}

.timer {
  grid-area: timer;

  .timerLabel {
    @include label;
  }

  .value {
    @include time;
  }
}

.clock {
  grid-area: clock;

  .clockLabel {
    @include label;
  }

  .value {
    grid-area: clock;
    @include time;
  }
}

.headerActions {
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: $label-colour;
  height: 100%;
  font-size: 1rem;

  .actionIcon,
  .actionText {
    cursor: pointer;

    &.enabled {
      color: $active-indicator;
    }

    &:hover {
      color: $active-colour;
    }
  }

  .actionIcon {
    font-size: 1.25rem;
  }
}

@media (min-width: 1200px) {
  // in large screens we want to space the buttons
  .headerActions {
    padding-left: 10vw;
  }
}