$size: 3px;

.page-dots {
  position: fixed;
  left: 48px;
  top: 50%;
  z-index: 5;
  width: $size;
  height: 300px;
  margin-top: -150px;
}

@media (max-width: 481px) {
  .page-dots {
    display: none;
  }
}

.page-dots {
  display: flex;
  flex-direction: column;
  justify-content: center;

  > .dot {
    flex: 0 0 auto;
    width: 100%;
  }
}

/*
 * Dot
 */

.page-dots > .dot {
  & {
    text-align: center;
    display: block;
    border: solid 1px rgba(red, .1);
    background: $gray;
    border-radius: $size / 2;
    width: $size;
    height: $size;
    opacity: .2;
    margin: 5px 0;

    transition: all 0ms linear;
  }

  &.-active {
    background: $blue;
    opacity: 1;
    height: $size * 6;
  }
}

/*
 * Hide
 */

.page-dots {
  opacity: 1;
  transition: opacity 300ms linear 300ms;

  &.-hide {
    opacity: 0;
    transition: opacity 300ms linear;
  }
}

/*
 * Mobile
 */

@media (max-width: 768px) {
  .page-dots {
    display: none;
  }

  // .page-dots {
  //   flex-direction: row;
  //   width: 100%;
  //   height: $size + 16px + 8px;
  //   left: 0;
  //   bottom: 0;
  //   top: auto;
  //   right: auto;
  //   padding: 16px 8px 16px 8px;
  //   background: white;
  //   border-top: solid 1px $line-color;
  // }

  // .page-dots > .dot {
  //   margin: 0 3px;
  // }

  // .page-dots > .dot.-active {
  //   height: $size;
  // }
}
