/* Copyright (c) Fortanix, Inc.
|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@use '../../../../styling/defs.scss' as bk;


@layer baklava.components {  
  .bk-pagination {
    @include bk.component-base(bk-pagination);
    
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: bk.$spacing-6;
    font-weight: bk.$font-weight-regular;
    font-size: bk.$font-size-s;
    
    .pager.pager--indexed {
      display: flex;
      align-items: center;
      gap: bk.$spacing-1;
      padding-inline-start: bk.$spacing-6;
      border-inline-start: bk.$size-1 solid bk.$theme-pagination-border-default;
      
      .pager__nav {
        display: flex;
        
        &:not(:global(.nonactive)) {
          cursor: pointer;
        }
        &:global(.nonactive) {
          opacity: 0.34;
        }
      }
    }
    .pagination__page-input {
      border: bk.$size-1 solid bk.$theme-pagination-border-default;
      border-radius: bk.$size-2;
      text-align: center;
      
      .pagination__page-input__input {
        padding-inline: 1ch;
        
        @supports (field-sizing: content) {
          field-sizing: content;
          min-inline-size: 5ch;
        }
        @supports not (field-sizing: content) {
          inline-size: 5ch;
        }
        
        &[type="number"] {
          // Try to hide the number spin controls
          // https://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-input-s-spin-box
          // stylelint-disable-next-line property-no-vendor-prefix
          -moz-appearance: textfield;
          &::-webkit-outer-spin-button,
          &::-webkit-inner-spin-button {
            // stylelint-disable-next-line property-no-vendor-prefix
            -webkit-appearance: none;
            margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
          }
        }
      }
    }
    .pagination-main {
      display: flex;
      gap: bk.$spacing-1;
      align-items: center;
    }
  }
  
  @media only screen and (width <= 1100px) {
    .bk-pagination {
      justify-content: flex-start;
      flex-wrap: wrap;
    }
  }
}
