import styled from '@emotion/styled';
import { css } from '@emotion/core';
import { Box, Flex, Text } from '@rebass/emotion';
import hexToRgba from 'hex-rgba';

import { space, colors, fontSizes, lineHeights } from 'utils/theme';
import typography from 'utils/typography';
import { forDesktopUp } from 'utils/styles/mixins';

const disabledTextColour = hexToRgba(colors.textDark, 50);

export const Container: any = styled(Box)`
  border-bottom: solid 1px black;
  ${forDesktopUp(css`
    border: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  `)};
`;

export const CategoryDesktopItem: any = styled.button`
  margin: ${space.regular};
  cursor: ${(props: any) => props.isActive ? 'normal' : 'pointer'};
  color: ${(props: any) => props.isActive ? disabledTextColour : colors.textDark};
  text-transform: uppercase;
  font-weight: bold;
  font-size: ${fontSizes.small};
  margin-right: 50px;
  line-height: ${lineHeights.xxSmall};
  background: none;
  border: none;
  :hover {
    opacity: ${(props: any) => props.isActive ? 1 : 0.8};
  }
`;

export const CategoryDesktopTitleItem: any = styled(Text)`
  margin-right: 50px;
  font-size: ${fontSizes.base};
  font-weight: ${typography.options.bodyWeight};
  line-height: ${lineHeights.xLarge};
`;