.Header {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 10;
  background-color: $ecl-color-primary;
  box-shadow: inset 0 -1px 0 0 rgba(black, 0.25), 0 2px 0 rgba(black, 0.1);
  text-overflow: ellipsis;
  color: $color-header-content;
}

.Header-title {
  @include link-default(inherit, none);
  line-height: 2;
  padding: 0.75rem 1rem 0.75rem 0;
  white-space: nowrap;
}

.Header-button {
  @include border-inline(end, 1px solid rgba($color-header-content, 0.25));
  display: block;
  border: 0;
  height: 3rem;
  width: 3rem;
  touch-action: manipulation;
  color: inherit;
  cursor: pointer;

  &:focus,
  &:active {
    outline: none;
  }

  &:hover {
    background-color: rgba($color-header-content, 0.05);
  }

  &:active {
    background-color: rgba($color-header-content, 0.1);
  }
}

.Header-navToggle {
  svg {
    display: none;
    margin: 0 auto;
    fill: $color-header-content;
  }
}

.Frame {
  .Header-navToggleIcon--open {
    display: block;
  }
}

.Frame.is-closed {
  .Header-navToggleIcon--open {
    display: none;
  }
  .Header-navToggleIcon--closed {
    display: block;
  }
}