//
// Scrollspy component stories.
//

.story-container__page-content {
  &.story-scrollspy {
    height: 2000px;

    &::before {
      box-shadow: 0 0 ct-particle(0.125) ct-particle(0.125) #f00 inset;
      height: 400px;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      display: block;
      content: '';
    }

    &::after {
      box-shadow: 0 0 ct-particle(0.125) ct-particle(0.125) #00f inset;
      height: 600px;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      display: block;
      content: '';
    }
  }
}

.story-scrollspy-target1 {
  position: fixed;
  bottom: ct-particle(12);
  right: ct-particle(12);
}

.story-scrollspy-target2 {
  position: fixed;
  bottom: 10px;
  right: ct-particle(12);
}

.story-scrollspy-target1.ct-scrollspy-scrolled {
  border: solid ct-particle(0.125) red;
}

.story-scrollspy-target2.ct-scrollspy-scrolled {
  border: solid ct-particle(0.125) blue;
}
