@import '../../src/style/tools.css';

.bx-stepper-control {
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 2px;
  font-size: 13px;
  color: var(--stepper-text-color);
  display: flex;
  width: 125px;
  height: 26px;

  & .bx-stepper-minus {
    box-sizing: border-box;
    width: 26.4%;
    border: 1px solid var(--stepper-default-color);
    position: relative;
    display: block;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;

    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 39.4%;
      height: 1px;
      background-color: var(--stepper-text-color);
      transform: translate(-50%, -50%);
    }
  }

  & .bx-stepper-plus {
    box-sizing: border-box;
    width: 26.4%;
    border: 1px solid var(--stepper-default-color);
    position: relative;
    display: block;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;

    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 40%;
      height: 1px;
      background-color: var(--stepper-text-color);
      transform: translate(-50%, -50%);
    }

    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 39.4%;
      height: 1px;
      background-color: var(--stepper-text-color);
      transform: translate(-50%, -50%) rotate(90deg);
    }
  }

  & .bx-stepper-input {
    font-size: 13px;
    box-sizing: border-box;
    display: block;
    width: 47.2%;
    height: 100%;
    border: 0;
    border-top: 1px solid var(--stepper-default-color);
    border-bottom: 1px solid var(--stepper-default-color);
    border-radius: 0;
    text-align: center;
    color: #333;
    outline: 0;
    appearance: none;
    background-color: transparent;
  }

  & .bx-number-disabled {
    color: var(--stepper-default-color);

    &::before {
      background-color: var(--stepper-default-color);
    }

    &::after {
      background-color: var(--stepper-default-color);
    }
  }

  & .bx-input-disabled {
    background-color: transparent;
    border-top: 1px solid var(--stepper-default-color);
    border-bottom: 1px solid var(--stepper-default-color);
    opacity: 1;
  }
}
