.pagination {
  > li {
    > a,
    > span {
      svg, svg * {
        fill: $brand-copy-light;
      }
      svg {
        width: 10px;
        height: 10px;
        [dir="rtl"] & {
          transform: rotate(-180deg);
        }
      }
    }
  }

  > li > a,
  > li > span {
    &:hover,
    &:focus {
      svg, svg * {
        fill: $pagination-hover-color;
      }
    }
  }

  > .active > a,
  > .active > span {
    &,
    &:hover,
    &:focus {
      svg, svg * {
        fill: $pagination-active-color;
      }
    }
  }

  > .disabled {
    > span,
    > span:hover,
    > span:focus,
    > a,
    > a:hover,
    > a:focus {
      svg, svg * {
        fill: $pagination-disabled-color;
      }
    }
  }
}