@layer components {
  .admin-banner {
    display: flex;
    align-items: stretch;
    gap: var(--space-md);
    width: 100%;
    max-width: var(--max-reach-lg-x6);
    margin-inline: auto;
  }

  .admin-banner__trailing {
    display: flex;
    align-items: center;
    gap: var(--space-md);
  }

  .admin-banner__status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm-x3);
    padding: var(--space-sm-x3) var(--space-sm-x2);
    font-size: var(--font-size-sm-x1);
    font-weight: var(--font-weight-semi-bold);
    border-radius: var(--border-radius-2);
  }

  .admin-banner__status--published {
    color: var(--color-green-7);
    background-color: var(--color-green-1);
  }

  .admin-banner__status--unpublished {
    color: var(--color-red-7);
    background-color: var(--color-red-1);
  }

  .admin-banner__preview {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm-x3);
    font-size: var(--font-size-sm-x1);
    font-weight: var(--font-weight-semi-bold);
    color: var(--color-secondary-6);
    text-decoration: underline;
  }

  @media (any-hover: hover) {
    .admin-banner__preview:hover {
      color: var(--color-secondary-4);
    }
  }
}