/* p_stepper: ±ボタン付き数値入力コンポーネント */
.p_stepper {
    width: 100%;
    max-width: 140px;
    display: flex;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 4px;
}

.p_stepper .stepper-btn {
    background-color: #ffffff;
    border: 0;
    width: 34px;
    cursor: pointer;
    padding: 0;
}

.p_stepper .stepper-btn:before {
    content: " ";
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-size: contain;
}

.p_stepper .stepper-btn.is-plus:before {
    background-image: url(/images/designtool/g_icon/add.svg);
}

.p_stepper .stepper-btn.is-minus:before {
    background-image: url(/images/designtool/g_icon/remove.svg);
}

.p_stepper .stepper-input {
    flex: 1;
    /* input要素は自動最小幅(min-content)が大きくflexで縮まないため明示的に0にする。
       これが無いとテーブルの最小幅が膨らみ、狭い画面で右端がはみ出す */
    min-width: 0;
    border: none;
    text-align: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    max-width: 100%;
    line-height: 2.4;
    background: #ffffff;
}

.p_stepper .stepper-input:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ブラウザ標準のスピンボタンを非表示 */
.p_stepper .stepper-input::-webkit-outer-spin-button,
.p_stepper .stepper-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.p_stepper .stepper-input {
    -moz-appearance: textfield;
}

.p_stepper .stepper-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}