/* See ./l-split-sticky.md for design notes and rationale. */

.l-split-sticky {
  display: grid;

  --lss-gta:    var(--lss-gta-sm,    "L1" "L2" "L3" "L4" "R1" "R2" "R3");
  --lss-lspan:  var(--lss-lspan-sm,  7);
  --lss-rspan:  var(--lss-rspan-sm,  5);
  --lss-gap:    var(--lss-gap-sm,    var(--ll-grid-gutter));
  --lss-rgap:   var(--lss-rgap-sm,   var(--ll-space-6));
}

.l-split-sticky > .l-split-sticky__left > *,
.l-split-sticky > .l-split-sticky__right > * {
  grid-area: var(--ga, auto);
}

.l-split-sticky > .l-split-sticky__right {
  box-sizing: border-box;
  padding: var(--lss-right-padding, 0);
  background: var(--lss-right-bg, transparent);
  border-radius: var(--lss-right-radius, 0);
  box-shadow: var(--lss-right-shadow, none);
}

.l-split-sticky[data-layout-sm="stack"] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: var(--lss-gta);
  gap: var(--lss-rgap) 0;
}

.l-split-sticky[data-layout-sm="stack"] > .l-split-sticky__left,
.l-split-sticky[data-layout-sm="stack"] > .l-split-sticky__right {
  display: contents;
}

.l-split-sticky[data-layout-sm="split"] {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 var(--lss-gap);
}

.l-split-sticky[data-layout-sm="split"] > .l-split-sticky__left {
  display: block;
  grid-column: span var(--lss-lspan);
  align-self: start;
}

.l-split-sticky[data-layout-sm="split"] > .l-split-sticky__right {
  display: flex;
  flex-direction: column;
  gap: var(--lss-right-gap, 0);
  grid-column: span var(--lss-rspan);
  align-self: start;
  position: sticky;
  top: calc(
    var(--sticky-container-top-height, 0px)
    + var(--lss-sticky-buffer, 0px)
  );
}

@media (width >= 768px) {
  .l-split-sticky {
    --lss-gta:
      var(--lss-gta-md,
        var(--lss-gta-sm, "L1" "L2" "L3" "L4" "R1" "R2" "R3"));
    --lss-lspan:
      var(--lss-lspan-md,
        var(--lss-lspan-sm, 7));
    --lss-rspan:
      var(--lss-rspan-md,
        var(--lss-rspan-sm, 5));
    --lss-gap:
      var(--lss-gap-md,
        var(--lss-gap-sm, var(--ll-grid-gutter)));
    --lss-rgap:
      var(--lss-rgap-md,
        var(--lss-rgap-sm, var(--ll-space-6)));
  }

  .l-split-sticky[data-layout-md="stack"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: var(--lss-gta);
    gap: var(--lss-rgap) 0;
  }

  .l-split-sticky[data-layout-md="stack"] > .l-split-sticky__left,
  .l-split-sticky[data-layout-md="stack"] > .l-split-sticky__right {
    display: contents;
  }

  .l-split-sticky[data-layout-md="split"] {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 var(--lss-gap);
  }

  .l-split-sticky[data-layout-md="split"] > .l-split-sticky__left {
    display: block;
    grid-column: span var(--lss-lspan);
    align-self: start;
  }

  .l-split-sticky[data-layout-md="split"] > .l-split-sticky__right {
    display: flex;
    flex-direction: column;
    gap: var(--lss-right-gap, 0);
    grid-column: span var(--lss-rspan);
    align-self: start;
    position: sticky;
    top: calc(
      var(--sticky-container-top-height, 0px)
      + var(--lss-sticky-buffer, 0px)
    );
  }
}

@media (width >= 1024px) {
  .l-split-sticky {
    --lss-gta:
      var(--lss-gta-lg,
        var(--lss-gta-md,
          var(--lss-gta-sm, "L1" "L2" "L3" "L4" "R1" "R2" "R3")));
    --lss-lspan:
      var(--lss-lspan-lg,
        var(--lss-lspan-md,
          var(--lss-lspan-sm, 7)));
    --lss-rspan:
      var(--lss-rspan-lg,
        var(--lss-rspan-md,
          var(--lss-rspan-sm, 5)));
    --lss-gap:
      var(--lss-gap-lg,
        var(--lss-gap-md,
          var(--lss-gap-sm, var(--ll-grid-gutter))));
    --lss-rgap:
      var(--lss-rgap-lg,
        var(--lss-rgap-md,
          var(--lss-rgap-sm, var(--ll-space-6))));
  }

  .l-split-sticky[data-layout-lg="stack"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: var(--lss-gta);
    gap: var(--lss-rgap) 0;
  }

  .l-split-sticky[data-layout-lg="stack"] > .l-split-sticky__left,
  .l-split-sticky[data-layout-lg="stack"] > .l-split-sticky__right {
    display: contents;
  }

  .l-split-sticky[data-layout-lg="split"] {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 var(--lss-gap);
  }

  .l-split-sticky[data-layout-lg="split"] > .l-split-sticky__left {
    display: block;
    grid-column: span var(--lss-lspan);
    align-self: start;
  }

  .l-split-sticky[data-layout-lg="split"] > .l-split-sticky__right {
    display: flex;
    flex-direction: column;
    gap: var(--lss-right-gap, 0);
    grid-column: span var(--lss-rspan);
    align-self: start;
    position: sticky;
    top: calc(
      var(--sticky-container-top-height, 0px)
      + var(--lss-sticky-buffer, 0px)
    );
  }
}

@media (width >= 1440px) {
  .l-split-sticky {
    --lss-gta:
      var(--lss-gta-xl,
        var(--lss-gta-lg,
          var(--lss-gta-md,
            var(--lss-gta-sm, "L1" "L2" "L3" "L4" "R1" "R2" "R3"))));
    --lss-lspan:
      var(--lss-lspan-xl,
        var(--lss-lspan-lg,
          var(--lss-lspan-md,
            var(--lss-lspan-sm, 7))));
    --lss-rspan:
      var(--lss-rspan-xl,
        var(--lss-rspan-lg,
          var(--lss-rspan-md,
            var(--lss-rspan-sm, 5))));
    --lss-gap:
      var(--lss-gap-xl,
        var(--lss-gap-lg,
          var(--lss-gap-md,
            var(--lss-gap-sm, var(--ll-grid-gutter)))));
    --lss-rgap:
      var(--lss-rgap-xl,
        var(--lss-rgap-lg,
          var(--lss-rgap-md,
            var(--lss-rgap-sm, var(--ll-space-6)))));
  }

  .l-split-sticky[data-layout-xl="stack"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: var(--lss-gta);
    gap: var(--lss-rgap) 0;
  }

  .l-split-sticky[data-layout-xl="stack"] > .l-split-sticky__left,
  .l-split-sticky[data-layout-xl="stack"] > .l-split-sticky__right {
    display: contents;
  }

  .l-split-sticky[data-layout-xl="split"] {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 var(--lss-gap);
  }

  .l-split-sticky[data-layout-xl="split"] > .l-split-sticky__left {
    display: block;
    grid-column: span var(--lss-lspan);
    align-self: start;
  }

  .l-split-sticky[data-layout-xl="split"] > .l-split-sticky__right {
    display: flex;
    flex-direction: column;
    gap: var(--lss-right-gap, 0);
    grid-column: span var(--lss-rspan);
    align-self: start;
    position: sticky;
    top: calc(
      var(--sticky-container-top-height, 0px)
      + var(--lss-sticky-buffer, 0px)
    );
  }
}