.l-header {
  @include grid-assign(heading, search, action, container);

  @include backdrop(true, true, 0.7);
  background-color: var(--theme-color--paper);
  color: var(--theme-color--accent);
  position: sticky;
  top: 0;
  z-index: 30;
  box-shadow: var(--theme-box-shadow);
  grid-template:
    " . ......... . " var(--theme-spacing--1)
    " . container ." minmax(0, 1fr)
    " . ......... ." var(--theme-spacing--1)
    / minmax(var(--theme-spacing--gutter), 1fr) var(--theme-spacing--container) minmax(var(--theme-spacing--gutter), 1fr);

  &__container {
    display: grid;
    grid-template:
      "heading . search action" min-content
      / max-content var(--theme-spacing--4) 1fr
      min-content;
  }
  &__heading {
    color: var(--theme-color--brand);
    display: grid;
    align-items: center;
    @media (min-width: $c-max) {
      width: 140px;
    }
  }

  &__home {
    @include on-event {
      color: var(--theme-color--accent);
      outline: none;
    }
  }
  &__search {
    position: relative;
  }
  &__action {
    transform: translateX(
      calc(
        calc(var(--theme-spacing--touchtarget) / 2) - var(--theme-spacing--1)
      )
    );
  }
}
// post header height to other elements
:root {
  --header-height: calc(
    var(--theme-spacing--touchtarget) + calc(var(--theme-spacing--1) * 2)
  );
}
