:host {
  position: relative;
  box-sizing: border-box;
  font-feature-settings: "cv03", "cv04", "cv11";
}
:host *, :host *:before, :host *:after {
  box-sizing: inherit;
}

:host {
  display: block;
  z-index: var(--sl-z-index-page-header);
}

:host(.page-header--sticky) {
  position: sticky;
  top: 0px;
}

.page-header {
  padding: var(--sl-spacing-x-small) var(--sl-spacing-medium);
  border-bottom: 1px solid var(--sl-panel-border-color);
}

.page-header--opaque {
  background: var(--sl-color-white);
}

.page-header--frosted {
  background: rgba(255, 255, 255, 0.72);
  --webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: blur(20px);
}

.margin {
  min-width: 45rem;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header {
  flex: 1 1 0%;
  min-width: 0px;
}
.header h2 {
  font-size: var(--sl-font-size-large);
  line-height: var(--sl-line-height-normal);
  font-weight: var(--sl-font-weight-semibold);
  color: var(--sl-color-gray-900);
  margin: 0px;
}
.header .actions {
  margin-left: var(--sl-spacing-medium);
  display: flex;
}

.actions {
  box-sizing: border-box;
}