$pagination-results-font-size: 14px !default;
$pagination-results-font-weight: 500 !default;

.suka-pagination {
  display: block;
}

// Note: this wrapper element is only used to get the flexbox vertical centering to work
// with the `min-height` on IE11. It can be removed if we drop support for IE.
.suka-pagination-outer-container {
  display: flex;
}

.suka-pagination-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  padding: $spacing-md;
}


.suka-pagination-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .btn--plain {
    color: $dark;
  }

  .suka-pagination-actions__numbers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .suka-pagination-navigation-page {
    position: relative;

    &.suka-pagination-navigation-page--selected:after {
      position: absolute;
      content: '';
      bottom: 0;
      left: 0;
      width: 100%;
      height: 3px;
      background: $accent;
    }
  }
}

.suka-pagination-results {
  font-size: $pagination-results-font-size;
  font-weight: $pagination-results-font-weight;
  color: $dark-gray-3;

  .suka-pagination-result {
    color: $dark-gray-2;
  }
}

@media (max-width: breakpoint('sm')) {
  .suka-pagination-container {
    justify-content: center;
  }

  .suka-pagination-actions {
    width: 100%;
    .btn--plain {
      padding: $spacing-md $spacing-sm;
    }
  }

  .suka-pagination-results {
    margin-bottom: $spacing-sm;
  }
}