/**
 * Number spinner
 */
.number-style {
  display: inline-block;
  margin-right: 10px;

  input {
    margin: 0 5px;
    font-family: Consolas, Monaco, monospace;
    text-align: center;
    width: 4em;
  }

  > span {
    cursor: pointer;

    &.number-minus,
    &.number-plus {
      height: 24px;
      width: 24px;
      display: inline-block;
      text-align: center;
      vertical-align: top;
      // to match WordPress:
      border-radius: 3px;
      background: #0085ba;
      border-width: 1px;
      border-style: solid;
      border-color: #0073aa #006799 #006799;
      -webkit-box-shadow: 0 1px 0 #006799;
      box-shadow: 0 1px 0 #006799;
      text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799, -1px 0 1px #006799;
      color: #FFF;

      &:hover {
        background: #008ec2;
      }

      &:active {
        background: #0073aa;
        border-color: #006799;
        -webkit-box-shadow: inset 0 2px 0 #006799;
        box-shadow: inset 0 2px 0 #006799;
        -webkit-transform: translateY(1px);
        -ms-transform: translateY(1px);
        transform: translateY(1px);
        outline: none;
      }

      &.disabled {
        background: #AAA;
        border-color: #999 #777 #777;
        -webkit-box-shadow: 0 1px 0 #777;
        box-shadow: 0 1px 0 #777;
        text-shadow: 0 -1px 1px #777, 1px 0 1px #777, 0 1px 1px #777, -1px 0 1px #777;
      }
    }

    &.number-minus::after,
    &.number-plus::after {
      font-family: dashicons;
      font-size: 24px;
      line-height: 24px;
      height: 24px;
      width: 24px;
      display: inline-block;
      color: #FFF;
      text-align: center;
      position: relative;
      left: -1px;
    }

    &.number-minus::after {
      content: "\f140";
    }

    &.number-plus::after {
      content: "\f142";
    }
  }

  input[type='number'] {
    -moz-appearance: textfield;
  }

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  /**
   * Disable text selection on buttons. Seems to help jittery pointers.
   */
  .number-minus,
  .number-plus,
  .number-minus::after,
  .number-plus::after {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
  }
}