:root {
  --header-top-offset: 1rem;
}

.header--sticky-container {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 999;
  background-color: var(--surface-page);
}

.header--container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1rem;
  padding-top: 2rem;
  padding-bottom: 0;
  margin-bottom: 2rem;
  /* application.css's bare `header` element selector (styling the navbar) applies a 1px
     outline and padding-block to any <header>; this component renders a semantic <header>
     too, so it needs to opt back out. The top offset when sticky is owned by
     .header--sticky-container instead. */
  outline: none;

  &:has(.header--breadcrumbs) {
    padding-top: 1rem;
  }
}

.header--breadcrumbs {
  width: 100%;
  display: flex;
  align-items: center;
  /* application.css's `header nav` rule (styling the navbar) spaces its children with
     space-between; override it so the crumbs stay grouped on the left. */
  justify-content: flex-start;
  gap: 0.25rem;
}

.header--breadcrumb-link {
  font-size: var(--rem-12);
  font-variation-settings: 'wght' var(--text-medium);
  color: var(--text-action-neutral-tertiary);
  text-decoration: none;

  &:hover {
    color: var(--text-action-neutral-tertiary-hover);
  }
}

.header--breadcrumb-current {
  font-size: var(--rem-12);
  font-variation-settings: 'wght' var(--text-medium);
  color: var(--text-label);
}

.header--title-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;

  h1 {
    font-size: var(--rem-24);
    font-variation-settings: 'wght' var(--text-semibold);
    color: var(--text-heading);
  }
}

.header--content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.header--actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}