.dotted-pagination-container {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 7px;
  align-content: center;
  i {
    font-weight: 600;
    font-size: var(--hlx-font-content-size-lg);
    cursor: pointer;
    &[disabled='true'] {
      cursor: default;
      pointer-events: none;
      color: var(--hlx-border-color-dark);
    }
    // &[disabled="true"]{
    //   cursor: none;
    // }
  }
  & .pagination-dot-circle {
    display: inline-block;
    border-radius: 50%;
    min-width: 10px;
    width: 10px;
    height: 10px;
    min-height: 10px;
    box-shadow: 0px 1px 4px -1px;
    border: none;
    background: var(--hlx-border-color-lighter);
    // margin-right: 5px;

    &:last-child {
      margin-right: 0;
    }
    &:hover {
      cursor: pointer;
      // background-color: #FFFAEF;
      background-color: rgba(var(--hlx-color-primary), 0.5);
    }
    &.active {
      background-color: var(--hlx-color-primary);
      transform: scale(1.1);
    }
  }
}