import styled, { StyledComponent } from '@emotion/styled'
import { Text, Box, Flex } from '@rebass/emotion'
import { css } from '@emotion/core'

import { MI_IconHover } from 'utils/styles/mixins'

import { fontSizes, colors, space } from 'utils/theme'

export const ControlsContainer = styled(Flex)`
  justify-content: center;
  align-items: center;
  display: inline-flex;
`

export const ProgressContainer = styled(Box)`
  display: block;
`

export const SliderNumberText: StyledComponent<any, any, any> = styled(Text)`
  font-size: ${fontSizes.xSmall};
  color: ${(props: any) => props.colour};
  width: ${space.xxsmall}px;
  text-align: center;
`

export const SliderProgressBar = styled(Box)`
  margin: 0 ${space.xxsmall}px;
  width: 125px;
  height: 2px;
  border: solid 2px ${colors.primaryLight};
  border-radius: 3px;
`

export const IconContainer = styled(Flex)`
  margin-left: ${space.xsmall}px;
  path {
    stroke: ${(props: any) => props.colour};
  }
`

export const Icon = css`
  ${MI_IconHover};
  cursor: pointer;
  margin: 0 ${space.xxsmall}px;
`