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

export const SliderTickWrapper = styled.div`
  display: flex;
  margin-top: 10px;
  width: 100%;
`

export const SliderTick = styled.div`
  border-left: 1px solid
    ${props =>
      props.value / props.max >= props.order / props.tickCount
        ? theme.colors['blue-ribbon']
        : theme.colors['border-transparent']};
  height: 5px;
  width: 100%;

  &:first-of-type {
    border-left: 1px solid
      ${props =>
        props.value / props.max > props.order / props.tickCount
          ? theme.colors['blue-ribbon']
          : theme.colors['border-transparent']};
  }

  &:last-of-type {
    border-right: 1px solid
      ${props =>
        props.value / props.max >= props.order / props.tickCount
          ? theme.colors['blue-ribbon']
          : theme.colors['border-transparent']};
  }
`
