@define props {
  type: dense, sparse;
  bgActive: #07f;
  fgActive: #fff;
  bdActive: #06e;
  rd: 5px;
}

@alga pagination {
  .pagination {
    ref: display-flex flexWrap-wrap alignItems-center paddingLeft-0 margin-0 listStyle-none;
      
    .item .link {
      ref: display-block padding-0.5rem_1rem color-currentColor textDecoration-none cursor-pointer;
      
      svg, i {
        ref: pointerEvents-none;
      }
    }
  }
   
  @if type has dense {
    .pagination.dense .item {
      ref: marginRight-n1px backgroundColor-hexffffff;
      prefers-dark: backgroundColor-hex2f2f2f;
      prefers-toDark: backgroundColor-hex2f2f2f;
      prefers-toLight: backgroundColor-hexffffff;

      html[dir=rtl] & {
        ref: marginRight-0px marginLeft-n1px;
      }
    }

    .pagination.dense .item.active {
      ref: zIndex-1;
    }

    .pagination.dense .item .link {
      ref: borderStyle-solid borderColor-hexcbcbcb borderWidth-1px;
      ref: minWidth-10px textAlign-center;
      prefers-dark: borderColor-rgba(255,255,255,0.25);
      prefers-toDark: borderColor-rgba(255,255,255,0.25);
      prefers-toLight: borderColor-hexcbcbcb;
    }
  
    .pagination.dense .item:first-child .link {
      ref: borderTopLeftRadius-{props.rd} borderBottomLeftRadius-{props.rd};

      html[dir=rtl] & {
        ref: borderTopLeftRadius-0px borderBottomLeftRadius-0px;
        ref: borderTopRightRadius-{props.rd} borderBottomRightRadius-{props.rd};
      }
    }
    
    .pagination.dense .item:last-child .link {
      ref: borderTopRightRadius-{props.rd} borderBottomRightRadius-{props.rd};

      html[dir=rtl] & {
        ref: borderTopRightRadius-0px borderBottomRightRadius-0px;
        ref: borderTopLeftRadius-{props.rd} borderBottomLeftRadius-{props.rd};
      }
    }
    
    .pagination.dense .item.ellipsis .link {
      ref: pointerEvents-none paddingLeft-0.675rem paddingRight-0.675rem;
      ref: backgroundColor-hexf4f4f4 color-hex4a5568;
      prefers-dark: borderRightColor-rgba(255,255,255,0.25) borderTopColor-rgba(255,255,255,0.25) borderBottomColor-rgba(255,255,255,0.25) backgroundColor-hex2f2f2f color-inherit;
      prefers-toDark: borderRightColor-rgba(255,255,255,0.25) borderTopColor-rgba(255,255,255,0.25) borderBottomColor-rgba(255,255,255,0.25) backgroundColor-hex2f2f2f color-inherit;
      prefers-toLight: borderRightColor-hexededed borderTopColor-hexededed borderBottomColor-hexededed backgroundColor-hexf4f4f4 color-hex4a5568;
    }
  }
    
  @if type has sparse {
    .pagination.sparse .item .link {
      ref: border-1px_solid_hexcbcbcb marginLeft-0.25rem marginRight-0.25rem borderRadius-{props.rd} minWidth-10px textAlign-center;
      prefers-dark: borderColor-rgba(255,255,255,0.25);
      prefers-toDark: borderColor-rgba(255,255,255,0.25);
      prefers-toLight: borderColor-hexcbcbcb;
    }
    
    .pagination.sparse .item:first-child .link {
      ref: marginLeft-0;
    }
    
    .pagination.sparse .item:last-child .link {
      ref: marginRight-0;
    }
    
    .pagination.sparse .item.ellipsis .link {
      ref: pointerEvents-none border-none paddingLeft-0.25rem paddingRight-0.25rem;
    }
  }
  
  .pagination .item:not(.active):not(.ellipsis):hover .link {
    ref: backgroundColor-hexeeeeee;
    prefers-dark: backgroundColor-rgba(255,255,255,0.25);
    prefers-toDark: backgroundColor-rgba(255,255,255,0.25);
    prefers-toLight: backgroundColor-hexeeeeee;
  }
    
  .pagination .item.disabled .link {
    ref: pointerEvents-none backgroundColor-hexeeeeee color-hex4a5568;
    prefers-dark: backgroundColor-rgba(255,255,255,0.25) color-inherit;
    prefers-toDark: backgroundColor-rgba(255,255,255,0.25) color-inherit;
    prefers-toLight: backgroundColor-hexeeeeee color-hex4a5568;
  }
    
  .pagination .item.active .link {
    ref: pointerEvents-none borderColor-{props.bdActive} backgroundColor-{props.bgActive};
    ref: color-{props.fgActive};
  }
}