@use './button/base';
@use './button/secondary';
@use './select';

.cbp-pagination {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  & select {
    @extend .cbp-input__select;
  }
  
  & .cbp-pagination__items {
    align-items: inherit;
    display: inherit;
    gap: var(--cbp-space-2x);

    & select {
      display: none;
    }

    & .cbp-pagination__item-count {
      flex-shrink: 0;
      font-style: italic;
    }
  }

  .cbp-pagination__pages {
    display: inherit;
  
    & select {
      background-image: url('/assets/images/caret-down-gray-90.svg');
      background-size: var(--cbp-space-4x) var(--cbp-space-4x);
      border-left: 0;
      border-right: 0;
      border-radius: 0;
    }
  
    & .cbp-pagination__prev,
    & .cbp-pagination__next {
      @extend .cbp-btn-square; 
      @extend .cbp-btn__secondary;
    }
  
    & .cbp-pagination__prev {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  
    & .cbp-pagination__next {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
}


@media (min-width: 37.5em)  {
  .cbp-pagination .cbp-pagination__items select {
    display: unset;
  }
  
  .cbp-pagination__pages select {
    width: 13rem;
  }
}