.fs-block-header-main {
  --fs-height: 90px;
  --fs-align-items: center;
  --fs-gap: var(--fs-blocks-spacing-xl);
  --logo-width: 200px;
  --logo-padding: var(--fs-blocks-spacing-base);
  --sticky-height: 70px;
  --sticky-logo-width: 200px;
  --margin-inline: calc(calc(100% - var(--wp--style--global--wide-size)) / 2);

  position: relative;
  min-height: var(--fs-height);

  .is-stuck &.is-sticky {
    min-height: var(--sticky-height);
    background-color: color-mix(in srgb, var(--fs-blocks-color-background) 90%, transparent);

    .fs-block-header-main__logo-img.is-sticky-logo {
      --logo-width: var(--sticky-logo-width);
    }
  }

  .is-stuck.is-sticky-resize & {
    transition: height 0.8s;
  }

  .fs-block-header-main__logo {
    order: 2;

    /* TODO: Remove this once we have a better focus indicator */
    &:not(:focus-visible) {
      outline: none;
    }
  }

  :where(.fs-block-header-column:first-of-type) {
    --fs-justify-content: start;
    flex: 1;
    order: 1;
  }

  :where(.fs-block-header-column:last-of-type) {
    --fs-justify-content: end;
    flex: 1;
    order: 3;
  }

  >.fs-shape-divider {
    max-width: none;
    margin: 0;
  }

  @container (min-width: 850px) {
    &:not(.is-logo-center) {
      .fs-block-header-main__logo {
        margin-inline-start: max(0px, var(--margin-inline));
        justify-content: start;
        order: 1;
      }

      .fs-block-header-column:last-of-type {
        margin-inline-end: max(0px, var(--margin-inline));
        flex-grow: 0;
      }
    }

    &.is-logo-center {
      .fs-block-header-column:first-of-type {
        margin-inline-start: max(0px, var(--margin-inline));
      }

      .fs-block-header-column:last-of-type {
        margin-inline-end: max(0px, var(--margin-inline));
      }
    }
  }
}

.fs-block-header-main__logo {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--fs-blocks-color-primary);
  font-size: var(--wp--preset--font-size--2-xl);
  text-transform: uppercase;
  font-weight: bolder;

  .fs-block-header-main__logo-default,
  .fs-block-header-main__logo-sticky {
    display: contents;
  }

  .fs-block-header-main__logo-img {
    display: flex;
    width: var(--logo-width);
    height: auto;
    contain-intrinsic-size: var(--logo-width) auto;
  }
}

/* Hide default/sticky logo */
.fs-block-header.is-stuck .has-sticky-logo>.fs-block-header-main__logo-default,
.fs-block-header:not(.is-stuck) .fs-block-header-main__logo-sticky {
  display: none !important;
}

/* Hide dark/light logo */
:not(.fs-dark)>.fs-block-header-main__logo .is-dark-logo,
.fs-dark>.fs-block-header-main__logo .has-dark-logo> :not(.is-dark-logo) {
  display: none !important;
}