@charset "UTF-8";
@import "../../style/function";

$disableBorder: #eee;
$disableBg: #f6f6f6;
$inputerBorder: #e8edf1;

.im-page {
  text-align: center;

  button,
  span {
    margin: 0 2px;
  }

  .ellipses {
    margin: 0 2px 0 12px;
  }

  .im-btn {
    min-width: 0;
    text-align: center;
    padding: 0 3px;
    margin-right: 0;

    &.disabled,
    &.disabled:hover {
      background-color: $disableBg;
      border-color: $disableBorder;
    }
  }

  .im-btn.btn-s {
    height: 30px;
    min-width: 30px;

    &.im-page-arrow {
      width: 40px;
      margin-right: 2px;
    }
  }

  .im-btn.btn-m {
    height: 40px;
    min-width: 60px;

    &.im-page-arrow {
      width: 80px;
      margin-right: 2px;
    }
  }

  &-inputer {
    display: inline-block;
    margin-left: 10px;
    padding: 0 2px;
    border: 1px solid $inputerBorder;
    border-radius: 2px;
    vertical-align: middle;
    text-align: center;
    width: auto;
    font-size: 16px;

    &.inputer-s {
      height: 30px;
      min-width: 30px;

      .im-text,
      .im-page-inputer-postfix {
        height: 30px;
        line-height: 30px;
      }
    }

    &.inputer-m {
      height: 40px;
      min-width: 60px;

      .im-text,
      .im-page-inputer-postfix {
        height: 40px;
        line-height: 40px;
      }
    }

    .im-text {
      border: 0;
      padding: 0;
      text-align: right;

      &::-webkit-outer-spin-button,
      &::-webkit-inner-spin-button {
        -webkit-appearance: none;
      }
      &[type="number"] {
        -moz-appearance: textfield;
      }
    }

    .im-page-inputer-postfix {
      display: inline-block;
      vertical-align: middle;
      margin: 0 5px 0 1px;
    }
  }
}