.mini-pagination {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;

  a {
    display: block;
    padding: 0 10px 0 22px;
    border-width: 1px;
    border-radius: 3px;
    margin-right: 4px;
    font-size: 12px;
    line-height: 30px;
    cursor: pointer;
    border-style: solid;
    outline: none;
    border-color: #c4c6cf;
    background: #fff;
    color: #333;

    position: relative;

    &:hover {
      background-color: #f2f3f7;
      border-color: #a0a2ad;
      text-decoration: none;
    }

    &:before {
      position: absolute;
      content: ' ';
      width: 8px;
      top: 10px;
      left: 10px;
      height: 8px;
      transform: rotate(-45deg);
      border-top: 1px solid #333;
      border-left: 1px solid #333;
    }

    &:last-child {
      padding: 0 22px 0 10px;
      margin: 0 0 0 4px;

      &:before {
        left: auto;
        right: 10px;
        transform: rotate(135deg);
      }
    }

    &.disabled {
      cursor: not-allowed;
      background-color: #f7f8fa;
      border-color: #e6e7eb;
      color: #e0e0e0;

      &:before {
        border-top: 1px solid #e0e0e0;
        border-left: 1px solid #e0e0e0;
      }
    }
  }
}