cagov-pagination {
  .cagov-pagination__list {
    list-style: none;
    margin: 0;
    padding: 0 !important;
    display: flex;
  }
  .cagov-pagination__item {
    border: var(--border-1, 1px) solid var(--gray-100, #ededef);
    border-radius: var(--radius-2, 4px);
    margin: var(--s-sm, 0.25rem);
    a {
      padding: 0.75rem 0.875rem;
      display: inline-block;
      color: var(--primary-700, #165ac2);
      text-decoration: none;
      &:hover {
        color: var(--primary-900, #003588);
        background: var(--gray-50, #fafafa);
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
        text-decoration: none;
      }
      &:focus {
        color: var(--primary-900, #003588);
        background: var(--gray-50, #fafafa);
        outline: var(--border-2) solid var(--accent2-500);
        outline-offset: 2px;
        text-decoration: none;
      }
    }

    &.cagov-pagination-current {
      background-color: #165ac2;
      background-color: var(--primary-700, #165ac2);
      a {
        color: var(--white, #ffffff);
        &:hover {
          background-color: var(--primary-900, 003588);
          box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
          text-decoration: none;
          color: var(--white, #ffffff);
        }
        &:focus {
          background-color: var(--primary-900, 003588);
          border-color: var(--primary-900, 003588);
          outline: var(--border-2) solid var(--accent2-500);
          outline-offset: 2px;
        }
      }
    }
    &.cagov-pagination__overflow {
      border: none;
      padding: 0.875rem 0;
      &:hover {
        background: inherit;
      }
    }
  }

  .cagov-pagination__link-inactive {
    color: grey;
    border-color: grey;
    cursor: not-allowed;
    opacity: 0.5;
  }
}
