@import '../override-function';

// CSS for pagination navigation
// TODO: Move these to vets-website

.va-pagination {
  border-top: 1px solid $color-gray-lightest;
  font-size: .9em;
  overflow: hidden;
  padding: scale-rule(2rem 0 1rem);
  position: relative;
  text-align: center;
  width: 100%;
  display: flex;
  justify-content: center;

  &-prev {
    @media (max-width: $medium-screen) {
      margin-left: scale-rem(-3rem);
      padding: scale-rule(0 1rem 0 0);
    }

    &:not(:empty) {
      @media (min-width: $small-screen) {
        a::before {
          content: "\2039\a0\a0";
        }
      }
    }
  }

  &-next {
    @media (max-width: $medium-screen) {
      margin-right: scale-rem(-3rem);
      padding: scale-rule(0 0 0 1rem);
    }

    &:not(:empty) {
      @media (min-width: $small-screen) {
        a::after {
          content: "\a0\a0\203a";
        }
      }
    }
  }

  &-prev,
  &-next {
    position: relative;

    &:hover,
    &:focus {
      text-decoration: underline;
    }

    @media (min-width: $medium-screen) {
      padding: scale-rule(0 1rem);
    }
  }

  &-inner {
    white-space: nowrap;
    overflow: hidden;

    @media (max-width: $medium-screen) {
      width: scale-rem(20rem);
    }

    @media (min-width: $large-screen) {
      width: scale-rem(40rem);
    }
  }

  &-prev,
  &-next,
  &-inner {
    // a11y fix, ensures we show full focus outline: https://github.com/department-of-veterans-affairs/va.gov-team/issues/8790
    padding-bottom: 4px;
    padding-top: 4px;
  }

  a {
    line-height: 2;
    text-decoration: none;
  }
}

.va-pagination-inner a {
  border-radius: 1000px;
  display: inline-block;
  height: scale-rem(3rem);
  margin: scale-rule(0 .5rem);
  width: scale-rem(3rem);
  text-decoration: none;
}

.va-pagination-inner a:hover,
.va-pagination-inner a:focus,
.va-pagination-active,
.va-pagination-active:visited {
  background: $color-primary;
  color: $color-white;
}