@use '../abstract/index' as *;

.wizard {
  --p-header-color: var(--color-neutral-0);
  --p-start-color:  var(--color-neutral-5);
  --p-end-color:    var(--color-neutral-0);

  $header-height:     pxToRem(64);
  --p-header-height:  #{$header-height};


  /* bg layout */
  &-header-strip  { background-color:hsl(var(--p-header-color)); border-block-end:solid pxToRem(1) hsl(var(--color-border)); }
  &-start-bg      {  }
  &-end-bg        { background-color:hsl(var(--p-end-color)); }

  /* content layout */
  &-header        { padding-inline:pxToRem(32); }
  &-side          { padding-inline:pxToRem(32); }
  &-main          { padding-inline:pxToRem(32); }
  &-media         { }


  /* content layout */
  &-header-strip  { position:sticky; z-index:2; inset-block-start:0; }
  &-header        {
    position:sticky; z-index:2; inset-block-start:0;
    display:flex; align-items:center; gap:pxToRem(12);
  }
  &-side          { align-self:start; }
  &-media         {
    display:grid; justify-content:center; align-items:end; position:relative;
    > * { position:sticky; inset-inline:pxToRem(32); inset-block-end:pxToRem(32); margin-inline:auto; max-inline-size:calc(100% - 64px); max-block-size:320px; }
    @media (max-height:860px) { display:none; }
  }
  &-main          { display:flex; flex-direction:column; padding-block-start:pxToRem(40); padding-inline:pxToRem(40); min-inline-size:0; }
  .form           {
    block-size:100%; max-block-size:100%;
    &-footer {
      position:sticky; inset-block-end:0;
      background-color: hsl(var(--p-end-color));
    }
  }

  @media #{$break1} {
    display: grid;
    grid-template-rows: var(--p-header-height);
    min-block-size: 100dvh;
    &-header-strip,
    &-header { padding-inline:pxToRem(16); grid-row:1; grid-column:1; }
    .form-footer { padding-inline:pxToRem(40);  margin-inline:pxToRem(-16); }

    &-side  {
      display:none; padding:pxToRem(16);
      &.is-shown-mobile { display:block; }
    }
    &-main  { padding:pxToRem(16); padding-block-end:0; background-color:hsl(var(--p-end-color)); }
    &-media { display:none; }
    &-start-bg,
    &-end-bg        { display:none; }
  }
  @media #{$break2open} {
    display: grid;
    grid-template-columns: 1fr minmax(pxToRem(240),pxToRem(330)) minmax(pxToRem(0), pxToRem(100)) minmax(pxToRem(480),pxToRem(750)) 1fr;
    grid-auto-rows: var(--p-header-height)  auto 1fr;
    min-block-size: 100vh;

    &.is-no-gap-middle { grid-template-columns: 1fr minmax(pxToRem(240),pxToRem(330)) 0 minmax(pxToRem(480),pxToRem(750)) 1fr; }

    &-side { position:sticky; z-index:2; inset-block-start:var(--p-header-height); padding-block-start:pxToRem(54); }

    /* bg layout */
    &-header-strip  { grid-row:1;     grid-column:1 / -1; }
    &-start-bg      { grid-row:2 / 4; grid-column:1 / 3; background-color:hsl(var(--p-start-color)); border-inline-end:solid pxToRem(1) hsl(var(--color-border));}
    &-end-bg        { grid-row:2 / 4; grid-column:3 / 6; }

    /* content layout */
    &-header        { grid-row:1;     grid-column:2 / 5; }
    &-side          { grid-row:2;     grid-column:2;     }
    &-main          { grid-row:2 / 4; grid-column:4;     }
    &-media         { grid-row:3;     grid-column:1 / 3; }

    /* full layout */
    &.is-full-center-layout {
      .wizard-container {
        grid-column:2 / 5; padding-inline:pxToRem(32);
      }
    }
  }


  #{$theme-dark} & {
    --p-header-color: var(--color-neutral-105);
    --p-start-color:  var(--color-neutral-100);
    --p-end-color:    var(--color-neutral-90);
  }
}