@use '@/assets/css/constants.scss' as constants;

.dot-list {
  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: {
        width: 2px;
        color: constants.$font-secondary-color;
        style: solid;
      };
      transition: all .2s;
    }

    :hover {
      background-color: constants.$focus-color;
    }
  }

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