/// _components.dot.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2; fill-column: 80 -*-

.dot {
  cursor: pointer;
  display: inline-block;
  user-select: none;

  div {
    width: 10px;
    height: 10px;
    margin: 5px 7px;
    border: 2px solid $pf-color-secondary;
    transition: opacity 200ms ease;
    border-radius: 30px;
  }
}

.dot--active div,
.dot:hover div {
  background-color: $pf-color-secondary-touch;
}

.dot--disabled {
  cursor: not-allowed;

  div {
    border-style: dotted;
    border-width: 1px;
    cursor: not-allowed;
  }
}

.dot--disabled:hover div {
  background-color: transparent;
}