/**
 *
 * @ai-apps/angular v2.152.0 | _pagination.scss
 *
 * Copyright 2014, 2023 IBM
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0

 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */


@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;
      }
    }
  }
}
