/* stylelint-disable selector-class-pattern */

/**
 * @file
 * Visual styles for pager.
 */

nav.pager {
  ul {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style-type: none;

    li {
      display: inline-block;
      padding: 0.625rem;
      text-align: center;

      a {
        inline-size: 1.875rem;
        block-size: 1.875rem;
        display: inline-block;
        text-decoration: none;
        color: var(--color-black);
        line-height: 1.9;

        &:hover {
          color: var(--color-secondary-dark);
        }
      }

      &.is-active a {
        color: var(--color-white);
        background-color: var(--color-secondary-dark);
      }
    }

    li.pager__item--first,
    li.pager__item--previous,
    li.pager__item--next,
    li.pager__item--last {
      a {
        overflow: hidden;
        white-space: nowrap;
        text-indent: 100%;
        inline-size: 1.875rem;
        block-size: 1.875rem;
      }
    }

    li.pager__item--first a {
      background: transparent var(--icon-pager-first) no-repeat center;

      &:hover {
        background: transparent var(--icon-pager-first-hover) no-repeat center;
      }
    }

    li.pager__item--previous a {
      background: transparent var(--icon-pager-previous) no-repeat center;

      &:hover {
        background: transparent var(--icon-pager-previous-hover) no-repeat center;
      }
    }

    li.pager__item--next a {
      background: transparent var(--icon-pager-next) no-repeat center;

      &:hover {
        background: transparent var(--icon-pager-next-hover) no-repeat center;
      }
    }

    li.pager__item--last a {
      background: transparent var(--icon-pager-last) no-repeat center;

      &:hover {
        background: transparent var(--icon-pager-last-hover) no-repeat center;
      }
    }
  }
}