[data-fs-quantity-selector] {
  // --------------------------------------------------------
  // Design Tokens for Quantity Selector
  // --------------------------------------------------------

  // Default properties
  --fs-qty-selector-width                     : calc(var(--fs-control-tap-size) * 2.7);
  --fs-qty-selector-height                    : calc(var(--fs-control-tap-size) + (var(--fs-qty-selector-border-width) * 2));

  --fs-qty-selector-shadow                    : none;
  --fs-qty-selector-shadow-hover              : 0 0 0 var(--fs-border-width) var(--fs-border-color-active);

  --fs-qty-selector-bkg-color                 : var(--fs-color-body-bkg);
  --fs-qty-selector-bkg-color-hover           : var(--fs-qty-selector-bkg-color);

  --fs-qty-selector-border-radius             : var(--fs-border-radius);
  --fs-qty-selector-border-width              : var(--fs-border-width);
  --fs-qty-selector-border-width-hover        : var(--fs-border-width);
  --fs-qty-selector-border-color              : var(--fs-border-color);
  --fs-qty-selector-border-color-hover        : var(--fs-border-color-active);

  --fs-qty-selector-text-size                 : var(--fs-text-size-base);
  --fs-qty-selector-text-color                : var(--fs-color-text);

  // Button
  --fs-qty-selector-button-bkg-color          : transparent;
  --fs-qty-selector-button-border-radius      : var(--fs-qty-selector-border-radius);

  // Disabled
  --fs-qty-selector-disabled-bkg-color        : var(--fs-color-disabled-bkg);
  --fs-qty-selector-disabled-text-color       : var(--fs-color-disabled-text);
  --fs-qty-selector-disabled-border-color     : var(--fs-qty-selector-disabled-bkg-color);

  // --------------------------------------------------------
  // Structural Styles
  // --------------------------------------------------------

  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: var(--fs-qty-selector-width);
  height: var(--fs-qty-selector-height);
  box-shadow: var(--fs-qty-selector-shadow);

  [data-quantity-selector-input] {
    width: 100%;
    height: 100%;
    padding: 0;
    font-size: var(--fs-qty-selector-text-size);
    color: var(--fs-qty-selector-text-color);
    text-align: center;
    border: var(--fs-qty-selector-border-width) solid var(--fs-qty-selector-border-color);
    border-radius: var(--fs-qty-selector-border-radius);
  }

  [data-quantity-selector-button] {
    position: absolute;

    [data-fs-button-wrapper] { border-radius: var(--fs-qty-selector-button-border-radius); }

    &:not(:hover):not(:focus-visible) {
      [data-fs-button-wrapper] {
        background-color: var(--fs-qty-selector-button-bkg-color);
      }
    }

    &:first-of-type { inset-inline-start: 0; }
    &:last-of-type { inset-inline-end: 0; }

    &:disabled {
      [data-fs-button-wrapper],
      &:hover [data-fs-button-wrapper],
      &:focus-visible [data-fs-button-wrapper] {
        background-color: var(--fs-qty-selector-button-bkg-color);
      }
    }
  }

  &:hover {
    [data-quantity-selector-input]:not(:disabled):not(:focus) {
      background-color: var(--fs-qty-selector-bkg-color-hover);
      border-color: var(--fs-qty-selector-border-color-hover);
      border-width: var(--fs-qty-selector-border-width-hover);
      box-shadow: var(--fs-qty-selector-shadow-hover);
    }
  }
}

// --------------------------------------------------------
// Variants Styles
// --------------------------------------------------------

[data-fs-quantity-selector="disabled"] {
  [data-quantity-selector-input] {
    color: var(--fs-qty-selector-disabled-text-color);
    background-color: var(--fs-qty-selector-disabled-bkg-color);
    border-color: var(--fs-qty-selector-disabled-border-color);
  }
}