@use 'nhsuk-frontend/packages/core/settings' as *;
@use 'nhsuk-frontend/packages/core/tools' as *;

.nhsuk {
  &-numbered-pagination {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;

    @include mq($from: 'tablet') {
      flex-direction: row;
      align-items: flex-start;
    }

    &__list {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    &__item,
    &__prev,
    &__next {
      @include nhsuk-font(19);
      box-sizing: border-box;
      position: relative;
      min-width: 45px;
      min-height: 45px;
      padding: nhsuk-spacing(2) nhsuk-spacing(3);
      float: left;

      &:hover {
        background-color: $color_nhsuk-grey-4;
      }
    }

    &__item {
      display: none;
      text-align: center;

      @include mq($from: 'tablet') {
        display: block;
      }
    }

    &__prev,
    &__next {
      @include nhsuk-typography-weight-bold;

      .nhsuk-numbered-pagination__link {
        display: flex;
        align-items: center;
      }
    }

    &__prev {
      padding-left: 0;
    }

    &__next {
      padding-right: 0;
    }

    &__item--current,
    &__item--ellipses,
    &__item:first-child,
    &__item:last-child {
      display: block;
    }

    &__item--current {
      @include nhsuk-typography-weight-bold;
      outline: 1px solid transparent;
      background-color: $nhsuk-link-color;

      &:hover {
        background-color: $nhsuk-link-color;
      }

      .nhsuk-numbered-pagination__link {
        color: $color_nhsuk-white;
      }
    }

    &__item--ellipses {
      @include nhsuk-typography-weight-bold;

      &:hover {
        background-color: transparent;
      }
    }

    &__link {
      display: block;
      min-width: nhsuk-spacing(3);

      @media screen {
        &:after {
          content: '';
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
        }
      }

      &:focus {
        .nhsuk-numbered-pagination__icon {
          color: $nhsuk-focus-text-color;
        }

        .nhsuk-numbered-pagination__link-label {
          text-decoration: none;
        }

        .nhsuk-numbered-pagination__link-title--decorated {
          text-decoration: none;
        }
      }
    }

    &__link-label {
      @include nhsuk-font($size: 19, $weight: 'regular');
      @include nhsuk-link-style-default;
      display: inline-block;
      padding-left: nhsuk-spacing(6);
    }

    &__icon {
      width: nhsuk-px-to-rem(15px);
      height: nhsuk-px-to-rem(13px);
      color: $nhsuk-secondary-text-color;
      fill: currentcolor;
      forced-color-adjust: auto;
    }

    &__icon--prev {
      margin-right: nhsuk-spacing(3);
    }

    &__icon--next {
      margin-left: nhsuk-spacing(3);
    }
  }
}