import styled from "styled-components"

export const InputNumberStyled = styled.input<{
  color?: string
  width: number
  outline?: boolean
}>`
  color: ${(props) => props.color || "#000000"};
  font-size: 16px;
  font-weight: bold;
  width: ${(props) => props.width}px;
  padding: 0;
  margin: 0 4px;
  border: none;
  outline-color: ${(props) =>
    props.outline === false ? "transparent" : "unset"}!important;

  &:focus-visible {
    border: none;
    outline-color: ${(props) =>
      props.outline === false ? "transparent" : "unset"}!important;
  }

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

  /* Firefox */
  -moz-appearance: textfield;
`

export const CurrencyUnit = styled.span<{ color: string }>`
  color: ${(props) => props.color || "#000000"};
  font-size: 16px;
  font-weight: bold;
`

export const InputNumberBlock = styled.div`
  display: contents;
`

export const QuantityControl = styled.p<{
  background?: string
  color?: string
  borderColor?: string
}>`
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  width: 24px;
  font-size: 18px;
  background: ${(props) => (props.background ? props.background : "grey")};
  color: ${(props) => (props.color ? props.color : "#ffffff")};
  border: 1px solid ${(props) => props.borderColor};
  margin: 0;
  border-radius: 50px;
  font-weight: bold;
  cursor: pointer;
`