.default-quantity-selector {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;

  .quantity-controls {
    display: flex;
  }

  .quantity-button {
    align-items: center;
    background: transparent;
    border: var(--border-width-main) solid var(--button-border-color);
    color: var(--dark-900);
    cursor: pointer;
    display: flex;
    height: var(--button-size);
    justify-content: center;
    padding: var(--space-2) var(--space-4);
    -webkit-tap-highlight-color: transparent;
    width: var(--button-size);

    &:hover {
      background-color: var(--dark-800);
      color: var(--light-200);
    }

    &:disabled {
      background-color: transparent;
      color: var(--dark-800-o50);
      cursor: default;
    }
  }

  .quantity-input {
    -webkit-appearance: textfield;
       -moz-appearance: textfield;
            appearance: textfield;
    border: var(--border-width-main) solid var(--button-border-color);
    border-left: none;
    border-right: none;
    height: var(--button-size);
    padding: var(--space-2);
    text-align: center;
    width: var(--button-size);

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

  .quantity-button,
  .quantity-input {
    &:focus,
    &:focus-visible {
      outline: 1px dashed var(--button-primary-focus-outline);
      outline-offset: 2px;
      z-index: 2;
    }
  }
}