@import '../../globals/vars';

.#{$iot-prefix}--pagination {
  .#{$prefix}--pagination__left {
    margin: auto auto auto 0;

    html[dir='rtl'] & {
      margin: auto 0 auto auto;
    }
  }
  .#{$prefix}--select .#{$prefix}--select-input ~ .#{$prefix}--select__arrow {
    align-self: center;
  }
  .#{$prefix}--pagination__left,
  .#{$prefix}--pagination__text {
    display: var(--pagination-text-display);
  }
}
.#{$iot-prefix}--pagination--hide-page {
  .#{$prefix}--pagination__left .#{$prefix}--pagination__text:first-child,
  .#{$prefix}--pagination__left span:first-child,
  .#{$prefix}--pagination__left .#{$prefix}--form-item {
    display: none;
  }
  .#{$prefix}--pagination__left .#{$prefix}--pagination__text {
    margin-left: 0rem;
  }
}
// This is a workaround to hide the select controls since the
// page size select can't be disabled.
.#{$iot-prefix}--pagination--hide-select .bx--select {
  display: none;
}

html[dir='rtl'] {
  .#{$prefix}--pagination__button--forward,
  .#{$prefix}--pagination__button--backward {
    transform: rotate(180deg);
  }

  .#{$prefix}--pagination .#{$prefix}--select__item-count .#{$prefix}--select-input {
    border-left: 0.0625rem solid $ui-03;
    border-right: none;
  }

  .#{$prefix}--pagination .#{$prefix}--select__page-number .#{$prefix}--select-input {
    border-left: none;
    border-right: 0.0625rem solid $ui-03;
  }

  .#{$prefix}--pagination__left .#{$prefix}--pagination__text {
    margin-left: 0;
    margin-right: $spacing-05;
  }

  .#{$prefix}--pagination__right .#{$prefix}--pagination__text {
    margin-left: $spacing-05;
    margin-right: 0.0625rem;
  }

  .#{$iot-prefix}--pagination.#{$prefix}--pagination .#{$prefix}--select-input {
    padding: 0 $spacing-05 0 $spacing-08;

    @media (min-width: 42rem) {
      padding-left: 2.25rem;
    }

    & + svg {
      right: auto;
      left: $spacing-03;

      @media (min-width: 42rem) {
        left: $spacing-05;
      }
    }
  }
}