@layer components {
  /*
   * Pagination
   */
  
  .pagination {
    align-items: flex-start;
    display: flex;
    justify-content: center;
    margin: 1rem auto;
  
    .btn {
      margin: 0 0.188rem;
      padding: 0.5rem 1rem;
    }
  
    .btn-number {
      flex: 0 0 auto;
      padding: 0.5rem 0;
      width: 2.25rem;
    }
  
    .btn-active {
      background-color: var(--color-primary);
      border: 1px solid transparent;
      box-shadow: 0px 1px 2px 0px rgb(var(--rgb-primary) / 0.32);
      color: var(--color-white);
      cursor: auto;
    }
  
    .btn-text {
      @media (max-width: 639.98px) {
        display: none;
      }
    }
  
    .btn-icon {
      display: none;
  
      @media (max-width: 639.98px) {
        display: inline;
      }
    }
  
    .btn-disabled {
      .btn-icon {
        color: var(--color-white);
      }
    }
  
    .pagination-ellipsis {
      display: inline-block;
      border: 1px solid transparent;
      font-size: 1rem;
      font-weight: 500;
      flex: 0 0 auto;
      margin: 0 0.188rem;
      padding: 0.5rem 0;
      line-height: 1.125;
      text-align: center;
    }
  }
}