import styled from '@emotion/styled';
import { Flex } from '@rebass/emotion';
import { css } from '@emotion/core';
import { colors } from 'utils/theme';

export const Container = styled(Flex)`
  width: 60px;
  justify-content: space-between;
  align-items: center;
`;

export const IconWrapper = styled.span<any>`
  line-height: 0;
  opacity: ${({ isDisabled }): number => isDisabled ? .5 : 1};
  cursor: pointer;
`;

export const Icon = css`
  svg {
    width: 13px;
    height: 13px;

    path {
      stroke: ${colors.black};
    }
  }
`