.ld-header {
  &,
  :host(&) {
    /* layout */
    --ld-header-height: 3.125rem;
    --ld-header-max-width: 90rem;

    /* colors */
    --ld-header-col: var(--ld-col-wht);
    --ld-header-bg-col: var(--ld-thm-primary);

    /* misc */
    --ld-header-box-shadow: var(--ld-shadow-stacked);

    background-color: var(--ld-header-bg-col);
    box-shadow: var(--ld-header-box-shadow);
    color: var(--ld-header-col);
    display: flex;
    justify-content: center;
    width: 100%;
    transition: transform var(--ld-transition-duration-quick) ease-in-out;
    overflow-x: auto;
  }

  :host(&.ld-header--sticky),
  &.ld-header--sticky {
    position: sticky;
    top: 0;
    z-index: 1;
  }

  :host(&.ld-header--hidden),
  &.ld-header--hidden {
    transform: translateY(-100%);
  }
}

.ld-header__container {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  gap: var(--ld-sp-16);
  height: var(--ld-header-height);
  max-width: var(--ld-header-max-width);
  padding-left: var(--ld-sp-16);
  padding-right: var(--ld-sp-16);
  flex-grow: 1;
  flex-shrink: 0;
}

[mode='ghost'],
.ld-button--ghost {
  ::slotted(&),
  .ld-header__container > & {
    margin: 0 calc(var(--ld-sp-4) * -1);
  }
}

.ld-header__logo-wrapper {
  color: inherit;
  display: flex;

  ::slotted(*) {
    margin: 0;
  }
}

.ld-header__logo {
  --ld-icon-size-md: 2.4rem;
  color: var(--ld-thm-warning);
  display: block;
  margin: -0.2rem;
}

.ld-header_site-name {
  white-space: nowrap;
}

.ld-header__grow {
  flex-grow: 1;
}

:host(.ld-header) {
  .ld-header__grow {
    margin-right: calc(var(--ld-sp-16) * -1);
  }
}
