import styled from 'styled-components/native';
import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs';
import PlusIcon from '../../Icons/plus';
import MinusIcon from '../../Icons/minus';
export const RelativeView = styled.View `
    position: relative;
`;
export const ButtonContainer = attachThemeAttrs(styled.View) `
    color: ${props => props.palette.text.header};
    height: 100%;
    top: 0;
    position: absolute;
    line-height: 1;
    border: 0;
    display: flex;
    z-index: 2;
    align-items: center;
    justify-content: center;

    ${props => props.iconPosition === 'left' &&
    `
        left: 5;
    `}
    ${props => props.iconPosition === 'right' &&
    `
        right: 5;
    `}
`;
export const StyledPlusIcon = attachThemeAttrs(styled(PlusIcon)) `
    width: 16px;
    height: 16px;
    color: ${props => props.palette.brand.main};
    ${props => props.disabled &&
    `
        color: ${props.palette.text.disabled}
    `}
`;
export const StyledMinusIcon = attachThemeAttrs(styled(MinusIcon)) `
    width: 16px;
    height: 16px;
    color: ${props => props.palette.brand.main};
    ${props => props.disabled &&
    `
        color: ${props.palette.text.disabled}
    `}
`;
