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

.overview {
  grid-area: overview;
  display: flex;
  align-items: center;
  justify-content: start;
  font-size: $inner-section-text-size;
  gap: 2rem;
  padding-right: 0.5rem;
}

.titles {
  flex: 1;
}

.title {
  font-size: 1.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.description {
  font-size: 1rem;
  color: $label-gray;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

@mixin indicator($bg-color) {
  &::before {
    content: '';  
    background-color: $bg-color;
    display: inline-flex;
    height: 0.75em;
    width: 0.75em;
    vertical-align: middle;
    margin-right: 0.25rem;
  }
}

.start {
  @include indicator($green-500);
}

.end {
  @include indicator($red-500);
}
