"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

const tslib_1 = require("tslib");

const React = tslib_1.__importStar(require("react"));

const styleh_components_1 = require("styleh-components");

const MaterialIcon_1 = require("../../components/atoms/MaterialIcon");

const Button_1 = require("../../components/atoms/Button");

const StyledInput = styleh_components_1.styled.input.attrs({
  'data-qa': 'qa-product-quantity',
  type: 'number',
  pattern: '/d+/'
})`width:40px;border:0;display:inline-flex;text-align:center;font-size:14px;-webkit-appearance:textfield;appearance:textfield;::-webkit-inner-spin-button{display:none;}`;
exports.StyledInput = StyledInput;
const StyledButton = styleh_components_1.styled(Button_1.Button)`border:0;background-color:transparent;padding:0;${props => props.isDisabled === true && styleh_components_1.styled.css`opacity:0.5;cursor:not-allowed;`}`;
exports.StyledButton = StyledButton;
const StyledPlusButton = styleh_components_1.styled(StyledButton).attrs({
  'data-qa': 'qa-quantity-plus',
  children: React.createElement(MaterialIcon_1.MaterialIcon, {
    type: "plus"
  })
})``;
exports.StyledPlusButton = StyledPlusButton;
const StyledMinusButton = styleh_components_1.styled(StyledButton).attrs({
  'data-qa': 'qa-quantity-minus',
  children: React.createElement(MaterialIcon_1.MaterialIcon, {
    type: "minus"
  })
})``;
exports.StyledMinusButton = StyledMinusButton;
/**
 * @todo make this a label `for` the child input
 */

const IncrementerWrapper = styleh_components_1.styled.div.attrs({
  'data-qa': 'qa-product-quantity'
})`display:flex;flex-direction:row;align-items:center;width:7rem;border:1px solid black;padding:10px;justify-content:space-between;`;
exports.IncrementerWrapper = IncrementerWrapper; //# sourceMappingURL=styled.js.map