.teetime__area-header {
  display: flex;
  gap: var(--g-gap);
  margin-bottom: var(--g-gap);
}

.teetime__area-label {
  cursor: pointer;

  &.-active {
    color: rgb(var(--c-primary));
  }
}

.teetime__area {
  display: grid;
  grid-gap: var(--g-gap);

  &:not(.-active) {
    display: none;
  }
}

.teetime__date-label {
  cursor: pointer;

  &.-active {
    color: rgb(var(--c-primary));
  }
}

.teetime__list {
  display: flex;
  gap: var(--g-gap-s) var(--g-gap);
  flex-wrap: wrap;
}

.teetime__list:not(.-active) {
  display: none;
}

.teetime a {
  display: flex;
  background-color: rgb(var(--c-neutral-lighter));
}

.teetime__time {
  padding: 0 0.8rem;
  color: rgb(var(--c-neutral-dark));
}

.teetime__bookable {
  background-color: rgb(var(--c-primary));
  color: rgb(var(--c-neutral-lightest));
  padding: 0 0.4rem;
}

@media (min-width: 640px) {
  .teetime__date-label {
    white-space: nowrap;
  }

  .teetime__area {
    grid-template-columns: min-content 1fr;
  }

}