.personal-overview {
  display: grid;
  justify-items: center;
  gap: var(--space-lg);
  padding-block: 4rem;
  color: var(--color-neutral-1100);
}

.personal-overview__profiles {
  inline-size: 100%;
  overflow-x: auto;
  padding-block: var(--space-sm);
  scroll-padding-inline: var(--space-lg);
}

.personal-overview__profile-track {
  display: flex;
  align-items: start;
  justify-content: safe center;
  gap: 3rem;
  min-inline-size: max-content;
  padding-inline: var(--space-lg);
}

.personal-profile {
  display: grid;
  grid-template-columns: 3.125rem;
  justify-items: center;
  gap: var(--space-sm);
  color: var(--color-neutral-1000);
  text-decoration: none;
}

.personal-profile__name {
  inline-size: 5rem;
  margin-inline: -0.9375rem;
  overflow-wrap: anywhere;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  text-align: center;
}

.personal-profile:hover .personal-profile__name,
.personal-profile:focus-visible .personal-profile__name {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.personal-vacations {
  display: grid;
  justify-items: center;
  inline-size: min(100% - 2rem, 50rem);
}

.personal-vacations__list {
  display: grid;
  justify-items: center;
  gap: var(--space-md);
  inline-size: 100%;
}

.personal-vacations__row {
  display: grid;
  grid-template-columns: 2.625rem minmax(0, auto) 2.625rem;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  max-inline-size: 100%;
}

.personal-vacations__row .vacation-pill {
  grid-column: 2;
}

.personal-vacations__row .vacation-add--icon {
  grid-column: 3;
  grid-row: 1;
}

.vacation-pill,
.vacation-add {
  background: var(--color-neutral-300);
  color: var(--color-neutral-1300);
  text-decoration: none;
}

.vacation-pill {
  display: flex;
  align-items: center;
  min-inline-size: 0;
  max-inline-size: 100%;
  min-block-size: 2.625rem;
  padding: 0.375rem 2rem 0.375rem 0.375rem;
  border-radius: var(--radius-pill);
}

.vacation-pill__avatars {
  display: flex;
  flex: none;
  align-items: center;
}

.vacation-pill__avatars .avatar + .avatar {
  margin-inline-start: -0.375rem;
}

.vacation-pill__text {
  min-inline-size: 0;
  margin-inline-start: var(--space-sm);
  font-size: var(--font-size-md);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.vacation-pill__name {
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
  text-underline-offset: 0.1em;
}

.vacation-pill__period {
  margin-inline-start: 0.25em;
}

.vacation-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  block-size: 2.625rem;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}

.vacation-add svg {
  inline-size: 1rem;
  block-size: 1rem;
}

.vacation-add--labelled {
  gap: var(--space-sm);
  padding: 0.375rem 1.125rem 0.375rem 0.75rem;
}

.vacation-add--icon {
  flex: none;
  inline-size: 2.625rem;
}

@media (hover: hover) {
  .vacation-pill:hover {
    background: var(--color-peach-900);
  }

  .vacation-add:hover {
    background: color-mix(in srgb, var(--color-neutral-300) 80%, black);
  }
}

.vacation-form {
  display: grid;
  gap: var(--space-lg);
  inline-size: min(100%, 37.5rem);
  margin-inline: auto;
}

.vacation-form__card {
  gap: var(--space-lg);
}

.vacation-form__hint {
  color: var(--color-neutral-900);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
}

.vacation-form__dates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}

.vacation-form__participants {
  display: grid;
  gap: 0;
  border: 0;
}

.vacation-form__participants legend {
  font-weight: var(--font-weight-semibold);
}

.vacation-form__checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-block-start: var(--space-lg);
}

.vacation-form__participants > .vacation-form__hint {
  margin-block-start: var(--space-sm);
}

.vacation-form__creator {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-block-start: var(--space-lg);
  border-block-start: 1px solid var(--color-neutral-400);
  font-weight: var(--font-weight-semibold);
}

.vacation-form__actions {
  display: flex;
  align-items: start;
  gap: var(--space-md);
  justify-content: space-between;
}

.vacation-form__primary-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

@media (max-width: 37.5rem) {
  .personal-overview {
    padding-block-start: 3rem;
  }

  .personal-overview__profiles {
    inline-size: 100%;
  }

  .personal-vacations__row {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    inline-size: 100%;
  }

  .personal-vacations__row .vacation-pill,
  .personal-vacations__row .vacation-add--icon {
    grid-column: 1;
    grid-row: auto;
  }

  .vacation-pill {
    min-block-size: 3.375rem;
    padding: 0.5rem 1.5rem 0.5625rem 0.75rem;
  }

  .vacation-pill__text {
    display: grid;
    gap: 0.125rem;
    white-space: normal;
  }

  .vacation-pill__name {
    font-size: var(--font-size-md);
  }

  .vacation-pill__period {
    margin: 0;
    font-size: var(--font-size-xs);
  }

  .vacation-form__dates {
    grid-template-columns: 1fr;
  }

  .vacation-form__actions {
    align-items: start;
  }

  .vacation-form__primary-actions {
    justify-content: end;
  }
}

@media (max-width: 31.25rem) {
  .vacation-form__actions {
    display: grid;
  }

  .vacation-form__primary-actions {
    display: grid;
  }
}