input {
    -webkit-appearance: none;
  }

  .product-stepper {
    display: flex;
    justify-content: flex-start;
    padding: var(--input-border-thickness);
  }

  .color-scheme-1 .product-stepper:not(.none-border):not(.line-border):after {
    /* box-shadow: 0 0 0 var(--input-border-thickness) rgba(var(--color-scheme-1-text), var(--input-border-opacity)), 0 0 0 var(--input-border-thickness) var(--btn-border-background-color); */
  }

  .color-scheme-1 .product-stepper:not(.none-border):not(.line-border):hover:after {
    /* box-shadow: 0 0 0 calc(var(--input-border-thickness) + 1px) rgba(var(--color-scheme-1-text), var(--input-border-opacity)), 0 0 0 calc(var(--input-border-thickness) + 1px) var(--btn-border-background-color); */
  }

  .color-scheme-2 .product-stepper:not(.none-border):not(.line-border):after {
    /* box-shadow: 0 0 0 var(--input-border-thickness) rgba(var(--color-scheme-2-text), var(--input-border-opacity)), 0 0 0 var(--input-border-thickness) var(--btn-border-background-color); */
  }

  .color-scheme-2 .product-stepper:not(.none-border):not(.line-border):hover:after {
    /* box-shadow: 0 0 0 calc(var(--input-border-thickness) + 1px) rgba(var(--color-scheme-2-text), var(--input-border-opacity)), 0 0 0 calc(var(--input-border-thickness) + 1px) var(--btn-border-background-color); */
  }

  .color-scheme-3 .product-stepper:not(.none-border):not(.line-border):after {
    /* box-shadow: 0 0 0 var(--input-border-thickness) rgba(var(--color-scheme-3-text), var(--input-border-opacity)), 0 0 0 var(--input-border-thickness) var(--btn-border-background-color); */
  }

  .color-scheme-3 .product-stepper:not(.none-border):not(.line-border):hover:after {
    /* box-shadow: 0 0 0 calc(var(--input-border-thickness) + 1px) rgba(var(--color-scheme-3-text), var(--input-border-opacity)), 0 0 0 calc(var(--input-border-thickness) + 1px) var(--btn-border-background-color); */
  }

  .product-stepper:not(.none-border):not(.line-border) {
    /* border-radius: var(--input-border-radius-outset); */
    position: relative;
  }

  .product-stepper:not(.none-border):not(.line-border):before {
    border-radius: var(--input-border-radius-outset);
    bottom: 0;
    box-shadow: var(--input-shadow-offset-x) var(--input-shadow-offset-y) var(--input-shadow-blur) rgba(var(--color-text), var(--input-shadow-opacity));
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
  }

  .product-stepper:not(.none-border):not(.line-border):after {
    border-radius: var(--input-border-radius);
    bottom: var(--input-border-thickness);
    /* box-shadow: 0 0 0 var(--input-border-thickness) rgba(var(--color-text), var(--input-border-opacity)), 0 0 0 var(--input-border-thickness) var(--btn-border-background-color); */
    content: "";
    left: var(--input-border-thickness);
    pointer-events: none;
    position: absolute;
    right: var(--input-border-thickness);
    top: var(--input-border-thickness);
    transition: box-shadow .1s ease;
    z-index: 1;
  }

  .product-stepper:not(.none-border):not(.line-border):hover:after {
    /* box-shadow: 0 0 0 calc(var(--input-border-thickness) + 1px) rgba(var(--color-text), var(--input-border-opacity)), 0 0 0 calc(var(--input-border-thickness) + 1px) var(--btn-border-background-color); */
  }

  .product-stepper.disabled input,
  .product-stepper.disabled span {
    background-color: #f5f5f5;
    cursor: not-allowed;
    opacity: .4;
  }

  .product-stepper.line-border,
  .product-stepper.none-border {
    border-radius: 0;
  }

  .product-stepper.line-border {
    border-bottom: var(--input-border-thickness) solid rgba(var(--color-text), var(--input-border-opacity));
    border-top: var(--input-border-thickness) solid rgba(var(--color-text), var(--input-border-opacity));
    box-shadow: var(--input-shadow-offset-x) var(--input-shadow-offset-y) var(--input-shadow-blur) rgba(var(--color-text), var(--input-shadow-opacity));
  }

  .product-stepper.none-border .icon {
    height: 20px !important;
    width: 20px !important;
  }

  .product-stepper .stepper-input {
    background-color: transparent;
    border: none;
    border-radius: 0;
    color: rgba(var(--color-text));
    margin: 0;
    outline: none;
    padding: 6px 0;
    text-align: center;
    width: 40px;
  }

  .product-stepper span {
    cursor: pointer;
    height: 40px;
    padding: 4px 0;
  }

  .product-stepper span.disabled {
    cursor: not-allowed;
    opacity: .4 !important;
  }

  .product-stepper .stepper-error {
    color: #eb5757;
    padding: 12px 0;
  }

  .product-sku-quantity .product-stepper {
    width: 140px;
    border: 1px solid #EBEBEB;
    border-radius: 24px;
    min-height: 49px;
  }
  @media screen and (min-width: 768px) {
    .product-sku-quantity .product-stepper {
      width: 168px;
      border-radius: 25px;
      min-height: 52px;
    }
  }