/* Components :: Pagination :: Styles */

@import '../../styles/settings/index';
@import '../../styles/tools/index';

.c-pagination {
  @include flex($align-items: center);

  background-color: fabric-color('white');
  border: 1px solid fabric-color('light-grey');
  font-family: 'FS-Emeric-Regular', sans-serif;
  padding: $fabric-global-spacing-unit-small;
  width: 100%;

  select {
    color: fabric-color('grey');
  }

  svg {
    color: fabric-color('grey');
    fill: fabric-color('grey');
  }

  .c-select {
    @include fabric-font-size(14px);
  }

  &__left {
    @include flex($align-items: center);
  }

  &__right {
    @include flex($align-items: center);

    margin-left: auto;
  }

  &--inline {
    margin-right: -$fabric-global-spacing-unit-small;
  }

  &__text {
    @include fabric-font-size(13px);

    color: fabric-color('grey');
    display: none;
    padding-right: $fabric-global-spacing-unit-tiny;

    @media (min-width: 530px) {
      display: block;
    }
  }

  &__button {
    @include fabric-font-size(24px);

    align-self: stretch;
    border: none;
    background: none;
    color: fabric-color('grey');
    cursor: pointer;

    &:focus {
      outline: none;
    }

    &[disabled] {
      opacity: 0.5;
      pointer-events: none;
    }

    .c-pagination--inline & {
      border-left: 1px solid fabric-color('light-grey');
      border-right: 1px solid fabric-color('light-grey');
    }

    &--backward {
      .c-pagination--inline & {
        margin: 0 $fabric-global-spacing-unit-small;
        padding: 0 $fabric-global-spacing-unit-small;
      }
    }

    &--forward {
      .c-pagination--inline & {
        border-right: 0;
        padding: 0 $fabric-global-spacing-unit-small;
        margin-left: $fabric-global-spacing-unit-small;
      }
    }
  }

  &__button-icon {
    fill: fabric-color('grey');
  }
}