.field--type-office-hours tbody th {
  width: 12ch;
}

.office-hours-status {
  &.office-hours-status--closed {
    color: var(--color-danger);
  }

  &.office-hours-status--open {
    color: var(--color-success);
  }
}

.field--type-office-hours {
  .field__items {
    display: flex;
    flex-flow: row wrap;
    gap: 1rem 2rem;
    justify-content: space-between;
  }

  .field__item:has(.office-hours-status) {
    flex-basis: 100%;
  }

  .field__item {
    min-width: calc(50% - 1rem);
  }
}
