$quantity-input-bg: $white !default;
$quantity-input-border: $valid-color !default;
$quantity-input-left-btn: $valid-color !default;
$quantity-input-right-btn: $valid-color !default;
$quantity-input-blocked-btn: darken($primary_color, 8%) !default;

jb-quantity-input {
  .form-control:focus { box-shadow: none; }

  label {
    font-weight: 700;
    margin-bottom: 2px;
    .info-badge {
      display: inline-block;
      margin-right: 7px;
      cursor: pointer;
    }
  }

  &.large .quantity-controller {
    height: 40px;
    div.quantity-controller-box {
      padding: 14px 0;
    }
  }

  &.small .quantity-controller {
    height: 28px;
    div.quantity-controller-box {
      padding: 8px 0;
    }
  }

  &.button-fit .quantity-controller {
    height: 35px;
    div.quantity-controller-box {
      padding: 10px 0;
    }
  }

  .quantity-controller {
    width: 100%;
    height: 34px;
    display: flex;

    div.quantity-controller-box {
      padding: 10px 0;
    }

    div.quantity-controller-box {
      width:30%;
      color: $quantity-input-bg;
      cursor: pointer;
      text-align: center;
      height: 100%;

      &.left{
        background: $quantity-input-left-btn;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        font-size: 10px;
      }

      &.right{
        background: $quantity-input-right-btn;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        font-size: 10px;
      }
      &.blocked {
        background: $quantity-input-blocked-btn;
        cursor: not-allowed;
      }
    }

    div.quantity-controller-center {
      height:100%;
      width:40%;
      input.quantity-input {
        height:100%;
        width:100%;
        text-align: center;
        border: 2px solid $quantity-input-border;
        border-radius: 0;
        border-left: none;
        border-right: none;
        &:focus {
          outline: none;
          border: 2px $focused-color solid;
          margin-right: -4px;
          //border-top: 2px $focused-color solid;
          //border-bottom: 2px $focused-color solid;
        }
      }
    }

  }

}