.xt_woofc-quantity {

  position: relative;
  display: inline-flex;
  height: 25px;
  z-index: 10;
  justify-content: flex-start;
  margin-right: 10px;

  .xt_woofc-remove-icon & {
    margin-right: -1px;
  }

  form {

    border: 1px solid var(--xt-woofc-border-color);
    overflow: hidden;
    margin: 0!important;
    transition: opacity 0.3s ease;
    border-radius: var(--xt-woofc-product-qty-input-radius);
  }

  .xt_woofc-quantity-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    height: 100%;
  }

  .xt_woofc-quantity-col {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--xt-woofc-border-color);
    padding: 0 5px;

    &.xt_woofc-quantity-hidden{
      padding: 0;
      font-size: calc(var(--xt-woofc-product-qty-input-size) * 0.8)!important;
    }

    &:last-child {
      border-right:0;
    }

    &.xt_woofc-quantity-button {
      color: var(--xt-woofc-product-qty-icon-color);

      .xtfw-no-touchevents &:hover,
      .xtfw-touchevents &:focus {
        text-decoration: none;
        color: var(--xt-woofc-product-qty-icon-hover-color);
      }
    }

    &.xt_woofc-quantity-col-minus,
    &.xt_woofc-quantity-col-plus{
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      -o-user-select: none;
      min-width: 25px;
      font-size: var(--xt-woofc-product-qty-icon-size);

      @include MQ_MAX(S) {
        font-size: calc(var(--xt-woofc-product-qty-icon-size) * 0.85);
      }
    }

    &.xt_woofc-quantity-col-input {

      color: var(--xt-woofc-product-qty-input-color);
      font-size: var(--xt-woofc-product-qty-input-size);

      input {
        display: block;
        margin: 0;
        font-weight: 400;
        -webkit-appearance: none;
        -moz-appearance: textfield;
        width: 25px;
        max-width: 65px;
        height: 100%;
        text-align: center;
        font-size: var(--xt-woofc-product-qty-input-size);
        border: 0;
        padding: 0;
        background: none;
        outline: none;
        transition: width 0.2s ease;
        will-change: width;
        box-shadow: initial!important;
        color: var(--xt-woofc-product-qty-input-color);

        @include MQ_MAX(S) {
          font-size: calc(var(--xt-woofc-product-qty-input-size) * 0.85);
        }

        &:focus {
          outline: 0;
          border-color: var(--xt-woofc-border-color);
        }

        &::-webkit-inner-spin-button,
        &::-webkit-outer-spin-button {
          -webkit-appearance: none;
          margin: 0;
        }
      }
    }
  }
}