.appointment-list-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.appointment-list-item--left-container {
  display: flex;
  flex-grow: 1;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: .5rem;

  h4 {
    font-size: var(--rem-14);
    color: var(--text-heading);
    font-variation-settings: 'wght' var(--text-medium);
  }

  span.appointment-list-item--text {
    font-size: var(--rem-12);
    &:not([data-is-colored="true"]) {
      color: var(--text-additional);
    }
  }
}

.appointment-list-item--subtitle-with-icon-container {
  width: fit-content;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: .25rem;
}