.inactive-dot, .active-dot {
  width: 17px;
  height: 17px;
  border: 1.5px solid;
  transition: all 0.2s linear;
}

.theme-pag-dots-colour-dark .inactive-dot {
  border-color: var(--black);
}

.theme-pag-dots-colour-dark .active-dot,
.theme-pag-dots-colour-dark .inactive-dot:hover {
  background-color: var(--black);
  border-color: var(--black);
}

.theme-pag-dots-colour-light .inactive-dot {
  border-color: var(--white);
}

.theme-pag-dots-colour-light .active-dot,
.theme-pag-dots-colour-light .inactive-dot:hover {
  background-color: var(--white);
  border-color: var(--white);
}

.theme-pag-dots-colour-constdark .inactive-dot {
  border-color: var(--constblack);
}

.theme-pag-dots-colour-constdark .active-dot,
.theme-pag-dots-colour-constdark .inactive-dot:hover {
  background-color: var(--constblack);
  border-color: var(--constblack);
}

.theme-pag-dots-colour-constlight .inactive-dot {
  border-color: var(--constwhite);
}

.theme-pag-dots-colour-constlight .active-dot,
.theme-pag-dots-colour-constlight .inactive-dot:hover {
  background-color: var(--constwhite);
  border-color: var(--constwhite);
}