// ********************************************
// container definition
$page-number: #{$prefix}-page-number;
$separator: #{$prefix}-selectbox__indicator-separator;
$input-container: #{$prefix}-selectbox__input;
.#{$page-number}{
  position: relative;
  display: inline-flex;
  border: border-size(xs) solid color(neutral, 200);
  margin: space(xs) 0;
  @include border-radius($border-radius);
  .#{$picker-panel} {
    &:not(:last-child) {
      border-right: border-size(xs) solid color(neutral, 200);
    }
  }

  &__pages{
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  &__ref{
    width: space(l);
    position: absolute;
    top: 0;
    pointer-events: none;
  }
  &__input{
    border: none;
    box-shadow: none;
    width: space(l);
    background: none;
    text-align: center;
    padding-right: space(xxs);
    &:focus{
      border: none;
      box-shadow: none;
    }
  }

  &__separator{
    width: space(xs);
  }
  &__total{
    padding: space(xs) 14px;
  }

  &__limiter{
    width: 1px;
    background: color(neutral, 200);
    height: calc(#{space(l)} - #{space(s)});
    margin-top: calc(#{space(xxs)} * 1.5);
    margin-left: space(xs);
    
  }
}