component PublicPageShell {
  props {
    maxWidth: string = "full"
    fullWidth: boolean = true
    headerOffset: string = "none"
    background: string = "default"
    overflow: string = "clip"
    minHeight: string = "screen"
    size: string = "default"
    color: string = "primary"
    variant: string = "default"
    class: string = ""
  }

  view {
    <div
      {...attrs}
      data-ui-component="PublicPageShell"
      class='wrn-page-shell {class}'
      data-size='{size}'
      data-color='{color}'
      data-variant='{variant}'
      data-background='{background}'
      data-overflow='{overflow}'
      data-min-height='{minHeight}'
      data-header-offset='{headerOffset}'
    >
      <slot name="before"></slot>

      <main
        class="wrn-page-shell__main"
        data-full-width='{fullWidth}'
        data-max-width='{maxWidth}'
      >
        <slot></slot>
      </main>

      <slot name="after"></slot>
    </div>
  }

  style {
    .wrn-page-shell {
      position: relative;
      isolation: isolate;
      width: 100%;
      min-width: 0;
      color: var(--wrn-color-text);
      background: var(--wrn-color-background);
    }

    .wrn-page-shell[data-background="soft"] {
      background: var(--wrn-color-surface-soft);
    }

    .wrn-page-shell[data-background="raised"] {
      background: var(--wrn-color-surface-raised);
    }

    .wrn-page-shell[data-min-height="screen"] {
      min-height: 100vh;
    }

    /*
     * dvh tracks the browser chrome on a phone, so a full-height shell does
     * not leave a gap when the address bar collapses.
     */
    .wrn-page-shell[data-min-height="dvh"] {
      min-height: 100dvh;
    }

    .wrn-page-shell[data-overflow="clip"] {
      overflow-x: clip;
    }

    .wrn-page-shell[data-overflow="hidden"] {
      overflow-x: hidden;
    }

    /*
     * One main element rather than a branch per width. fullWidth is an
     * attribute, so the width cap and the gutters are a couple of rules
     * instead of two copies of the same markup.
     */
    .wrn-page-shell__main {
      width: 100%;
      min-width: 0;
    }

    .wrn-page-shell__main[data-full-width="false"] {
      margin-inline: auto;
      padding-inline: 1rem;
    }

    .wrn-page-shell__main[data-full-width="false"][data-max-width="lg"] {
      max-width: 64rem;
    }

    .wrn-page-shell__main[data-full-width="false"][data-max-width="xl"] {
      max-width: 80rem;
    }

    .wrn-page-shell__main[data-full-width="false"][data-max-width="2xl"] {
      max-width: 96rem;
    }

    @media (min-width: 640px) {
      .wrn-page-shell__main[data-full-width="false"] {
        padding-inline: 1.5rem;
      }
    }

    @media (min-width: 1024px) {
      .wrn-page-shell__main[data-full-width="false"] {
        padding-inline: 2rem;
      }
    }

    /* Room for a fixed header to sit over the top of the shell. */
    .wrn-page-shell[data-header-offset="sm"] {
      padding-top: 4rem;
    }

    .wrn-page-shell[data-header-offset="md"] {
      padding-top: 5rem;
    }

    .wrn-page-shell[data-header-offset="lg"] {
      padding-top: 6rem;
    }
  }
}