@use '../../../theme/ontimeColours' as *;
@use '../../../theme/v2Styles' as *;

$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;
  font-size: 1.125rem;
  color: $label-colour;
  height: 100%;

  .actionIcon {
    cursor: pointer;

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

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

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