@layer components {
  .ec-chrome {
    --chrome-bar-px: var(--ec-space-16);
    --chrome-logo-w: 170px;
    --chrome-shadow: 0 1px 8px rgb(0 0 0 / 0.15);
    --chrome-z: 100;

    position: sticky;
    z-index: var(--chrome-z);
    inset-block-start: 0;
    background: var(--ec-bg-white);
    box-shadow: var(--chrome-shadow);
  }

  .ec-chrome__bar {
    display: flex;
    gap: var(--ec-space-16);
    align-items: center;
    justify-content: space-between;
    max-inline-size: var(--ec-page-max);
    margin-inline: auto;
    padding-block: var(--ec-space-16);
    padding-inline: var(--chrome-bar-px);
  }

  .ec-chrome__logo {
    flex-shrink: 0;
    display: block;
  }

  .ec-chrome__logo img {
    inline-size: var(--chrome-logo-w);
    block-size: auto;
  }

  .ec-chrome__link {
    color: var(--ec-text-primary);
    font-size: var(--ec-size-sm);
    font-weight: var(--ec-weight-medium);
    text-decoration: none;
  }

  .ec-chrome__link:hover {
    color: var(--ec-text-hover);
  }

  .ec-chrome__cta {
    display: none;
    gap: var(--ec-space-4);
  }

  @media (width >= 60rem) {
    .ec-chrome {
      --chrome-bar-px: 40px;
      --chrome-logo-w: 228px;
    }

    .ec-chrome__cta {
      display: inline-flex;
    }
  }
}