/*------------------------------------
  Dots
------------------------------------*/

.dots {
  & .dots-item {
    width: $dot-size;
    height: $dot-size;
    transition: background-color .2s ease-in;
  }

  &-light {
    & .dots-item {
      background-color: $border-color;

      &:hover {
        background-color: rgba($border-color, .5);
      }

      &.active {
        background-color: $primary;
      }
    }
  }
}
