//
// Copyright IBM Corp. 2019, 2021
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

$css--plex: true !default;

@import 'carbon-components/scss/components/pagination/pagination';

:host(#{$prefix}-pagination) {
  @extend .#{$prefix}--pagination;

  position: relative;
  outline: none;

  .#{$prefix}--pagination__left {
    flex: 1;
  }

  .#{$prefix}-ce--pagination__divider {
    height: 100%;
    width: $spacing-4xs;
    background-color: $ui-03;
  }

  .#{$prefix}--pagination__control-buttons {
    height: 100%;
  }

  .#{$prefix}--pagination__button svg {
    transform: rotate(0) #{'/*rtl:rotate(180deg)*/'};
  }
}

:host(#{$prefix}-pages-select) {
  @extend .#{$prefix}--select__page-number;

  outline: none;
}

:host(#{$prefix}-page-sizes-select) {
  @extend .#{$prefix}--select__item-count;

  outline: none;
}

:host(#{$prefix}-pages-select),
:host(#{$prefix}-page-sizes-select) {
  display: flex;
  align-items: center;
  height: 100%;

  .#{$prefix}--select-input {
    @include type-style('body-short-01');
    width: auto;
    min-width: auto;
    height: 100%;
    padding: 0 2.5rem 0 $spacing-md;
    margin-right: 0;
    border: none;

    @include carbon--breakpoint('md') {
      padding-right: carbon--mini-units(4.5);
    }

    &:hover {
      background: $hover-ui;
    }
  }

  .#{$prefix}--select__arrow {
    top: auto;
    bottom: auto;

    @include carbon--breakpoint('md') {
      right: $carbon--spacing-05;
    }
  }
}

:host(#{$prefix}-pages-select) .#{$prefix}--select__page-number,
:host(#{$prefix}-page-sizes-select) .#{$prefix}--select__item-count {
  display: flex;
  align-items: center;
  height: 100%;
  position: relative;
}

:host(#{$prefix}-pages-select) .#{$prefix}--pagination__text {
  margin-right: 1rem;
  margin-left: rem(1px);
}