import styled from 'styled-components'
import theme from 'theme'

export const NumberTickWrapper = styled.div`
  display: flex;
  margin-top: 10px;
  width: 100%;
`
export const NumberTick = styled.div`
  color: ${({ value, max }) =>
    value / max >= 0.5
      ? theme.colors['blue-ribbon']
      : theme.colors['border-transparent']};
  text-align: center;
  width: 100%;

  &:first-of-type {
    color: ${({ value }) =>
      value > 0
        ? theme.colors['blue-ribbon']
        : theme.colors['border-transparent']};
    text-align: left;
  }

  &:last-of-type {
    color: ${({ value, max }) =>
      value >= max
        ? theme.colors['blue-ribbon']
        : theme.colors['border-transparent']};
    text-align: right;
  }
`
