@use 'mixin' as *;
@use 'theme-variables' as *;

@include export-module('pager-layout') {

  .sf-pager {
    @include fontsize-padding-styles($pager-font-size, $pager-padding);
    border-style: $pager-border-style;
    border-width: $pager-border-1;
    display: inline-block;
    white-space: normal;
    width: $pager-percentage-100;

    div,
    a {
      display: inline-flex;
      user-select: none;
    }
    div.sf-pager-message-bar {
      display: inline-block;
    }

    .sf-pager-mfirst,
    .sf-pager-mprevious,
    .sf-pager-mnext,
    .sf-pager-mlast,
    .sf-pager-item-disable {
      display: none;
    }

    .sf-pager-external-message {
      display: block;
      margin: $pager-external-message-padding;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .sf-pager-message-bar {
    padding-bottom: $pager-message-bar-padding-bottom;
    padding-right: $pager-message-bar-padding-right;
    padding-top: $pager-message-bar-padding-top;
    font-weight: $pager-message-bar-font-weight;
    float: right;
    letter-spacing: $pager-message-letter-spacing;
    line-height: $pager-message-line-height;
    color: $pager-message-bar-color;
  }

  .sf-numeric-item {
    display: inline-block;
    line-height: $pager-numeric-item-line-height;
    padding: $pager-numeric-icon-padding;
    text-align: center;
    vertical-align: middle;
    font-weight: $pager-numeric-font-weight;
    margin: $pager-numeric-item-marging;
  }

  .sf-pager-container {
    display: inline-block;

    .sf-icons {
      display: inline-block;
      line-height: $pager-focus-triple-dot-line-height;
      padding: $pager-container-icon-padding;
      vertical-align: middle;
      margin: $pager-numeric-item-marging;
    }

    .sf-pager-first {
      border: $pager-goto-first-border;
      border-radius: $pager-goto-first-border-radius;
    }
    .sf-pager-last {
      border-radius: $pager-goto-last-border-radius;      
    }
    .sf-pager-previous, .sf-numeric-item, .sf-pager-next, .sf-pager-last  {
      border: $pager-icons-and-numeric-item-border;
      border-left: 0;
    }
  }

  .sf-pager-icons,
  .sf-current-item {
    border-radius: $pager-border-radius;
    cursor: pointer;
    text-decoration: none;
  }

  .sf-pager-mprevious {
    text-indent: $pager-negative-indent-3;
  }

  .sf-pager-mnext {
    text-indent: $pager-negative-indent-2;
  }

  .sf-pp,
  .sf-np {
    @include fontsize-padding-styles($pager-triple-dot-font-size, $pager-triple-dot-padding);
  }

  @media (max-width: 769px) {
    .sf-pager {
      padding: $pager-spacing-12 $pager-spacing-0 $pager-spacing-13;

      .sf-pager-message-bar {
        @include textalign-width-styles(center, calc(60% - 48px));
        display: inline-block;
        float: initial;
      }

      .sf-pager-mfirst,
      .sf-pager-mprevious,
      .sf-pager-mnext,
      .sf-pager-mlast {
        display: inline-block;
        padding: $pager-percentage-1 $pager-percentage-5;
      }
    }

    .sf-pager-count-message-container,
    .sf-pager .sf-pager-container {
      display: none;
    }

    .sf-pager-mfirst {
      @include textalign-width-styles(right, calc(10% + 11px));
      margin-right: $pager-spacing-4;
    }

    .sf-pager-mprevious {
      @include textalign-width-styles(right, 10%);
      margin: $pager-spacing-0 $pager-spacing-4;
    }

    .sf-pager-mnext {
      @include textalign-width-styles(left, 10%);
      margin: $pager-spacing-0 $pager-spacing-4;
    }

    .sf-pager-mlast {
      @include textalign-width-styles(left, calc(10% + 11px));
      margin-left: $pager-spacing-4;
    }
  }

  .sf-rtl .sf-pager-container {
    .sf-pager-first { 
      border-radius: $pager-rtl-goto-first-border-radius;
    }
    .sf-pager-last {
      border-radius: $pager-rtl-goto-last-border-radius;      
    }
    .sf-pager-previous, .sf-numeric-item, .sf-pager-next, .sf-pager-last  {
      border: $pager-icons-and-numeric-item-border;
      border-right: 0;
    }
  }

  .sf-rtl .sf-pager-message-bar {
    float: left;

    @media (max-width: 769px) {
      float: initial;
    }
  }
}