.pagination-wrapper {
  // to center one item and right aligned one item
  // https://stackoverflow.com/questions/38948102/center-one-and-right-left-align-other-flexbox-element
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 62px;

  .download,
  .results {
    position: absolute;
    left: 0;
  }

  .pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-weight: 500;
    background-color: $base-white;

    a {
      color: $sky-blue-500;
      text-decoration: none;

      &.disabled svg {
        cursor: not-allowed;
      }
    }

    ul {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;

      li {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 2px;
        margin-right: $base-spacing-half;
        cursor: pointer;
        color: $sky-blue-500;

        &.active {
          background-color: $sky-blue-500;

          a {
            color: $base-white;
          }
        }

        &:last-child {
          margin-right: 0;
        }
      }
    }

    svg {
      margin-left: $base-spacing;
      margin-right: $base-spacing;
      cursor: pointer;
    }

    span {
      cursor: pointer;
    }
  }

  .page-size {
    color: $base-black;
    position: absolute;
    right: 0;

    select {
      border-color: $boulder-400;
      border-radius: 2px;
      color: $boulder-400;
      padding-left: $base-spacing-half;
      padding-right: $base-spacing-2x;
      height: 46px;
      margin-left: $base-spacing-3-4th;
      margin-right: $base-spacing-1-half;
      -webkit-appearance:none;
      -moz-appearance:none;
      appearance: none;
    }

    label.select-wrapper {
      &::before {
        content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M20.7343997,7.20340672 C21.0369343,6.9196125 21.5124245,6.93461618 21.7964369,7.23691839 C22.05463,7.51173857 22.0656928,7.92938754 21.8382717,8.21627127 L21.7628995,8.29813984 L12.8478053,16.6609927 C12.4000257,17.0810349 11.7203768,17.1107014 11.2398501,16.7502163 L11.1326902,16.6601017 L2.23653106,8.29760525 C1.93429195,8.01349685 1.91977114,7.53835648 2.20409793,7.23634952 C2.46257683,6.96179775 2.87905475,6.92484705 3.17971854,7.1338526 L3.26616944,7.20394131 L11.9903648,15.4043523 L20.7343997,7.20340672 Z" transform="matrix(1 0 0 -1 0 24)"/></svg>');
        position: absolute;
        margin-right: $base-spacing-1-half;
        top: 8px;
        right: 8px;
        // need pointer events none to prevent clicking icon not toggling select
        pointer-events: none;
      }
      &::after {
        content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M20.7343997,7.20340672 C21.0369343,6.9196125 21.5124245,6.93461618 21.7964369,7.23691839 C22.05463,7.51173857 22.0656928,7.92938754 21.8382717,8.21627127 L21.7628995,8.29813984 L12.8478053,16.6609927 C12.4000257,17.0810349 11.7203768,17.1107014 11.2398501,16.7502163 L11.1326902,16.6601017 L2.23653106,8.29760525 C1.93429195,8.01349685 1.91977114,7.53835648 2.20409793,7.23634952 C2.46257683,6.96179775 2.87905475,6.92484705 3.17971854,7.1338526 L3.26616944,7.20394131 L11.9903648,15.4047756 L20.7343997,7.20340672 Z"/></svg>');
        position: absolute;
        margin-right: $base-spacing-1-half;
        bottom: 8px;
        right: 8px;
        pointer-events: none;
      }
    }
  }

  @media only screen and (max-width: map-get($base-breakpoints, 'lg')) {
    height: auto;

    .download {
      position: relative;
      margin-right: $base-spacing;

      &-button {
        margin-top: 0;
      }
    }

    .page-size {
      position: relative;
      margin: $base-spacing;
    }
  }
}

@media only screen and (max-width: map-get($base-breakpoints, 'lg')) {
  .with-sidebar .pagination-wrapper {
    .pagination {
      li:not(.active):not(.ellipsis):not(:last-child) {
        display: none;
      }

      svg {
        margin-left: $base-spacing-half;
        margin-right: $base-spacing-half;
      }
    }
  }
}

@media only screen and (min-width: map-get($base-breakpoints, 'lg')) and (max-width: map-get($base-breakpoints, 'lm')) {
  .with-sidebar .pagination-wrapper {
    height: auto;

    .download {
      position: relative;
      margin-right: $base-spacing;

      &-button {
        margin-top: 0;
      }
    }

    .page-size {
      position: relative;
      margin: $base-spacing;
    }
  }
}