@import '@/assets/css/constants';

.dotList {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;

  .item {
    flex: auto;
    cursor: pointer;

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 2px solid @font-secondary-color;
      transition: all .2s;
    }

    :hover {
      background-color: @focus-color;
    }
  }

  .active > * {
    background-color: @font-secondary-color !important;
  }
}