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

const ballStatusColor = stageNumber => {
  switch (stageNumber) {
    case '1':
      return theme.colors['magenta']
    case '2':
      return theme.colors['yellow']
    case '3':
      return theme.colors['red']
    case '4':
      return theme.gradients['bright-aqua']
  }
}

export const StageWrapper = styled.div`
  color: ${theme.textStyles.stage.color};
  font: ${theme.textStyles.stage.font};
  left: 20px;
  position: absolute;
  top: 40px;
`

export const StatusBall = styled.div`
  background: ${props => ballStatusColor(props.stageNumber)};
  border-radius: 50%;
  float: left;
  height: 7px;
  margin: 7px 10px 0 7px;
  width: 7px;
`

export const StageDetail = styled.div`
  clear: both;
  color: ${theme.textStyles.stage.color};
  font: ${theme.textStyles.navbarMenu.font};
  padding: 7px 0;
  position: relative;
  width: 300px;
`

export const Detail = styled.div`
  color: ${theme.textStyles.assetDetail.color};
  float: left;
  font: ${theme.textStyles.assetDetail.font};
  opacity: 0.3;
  padding: 0 0 0 7px;
  text-align: left;
`

/* stylelint-disable order/properties-alphabetical-order */
export const DetailValue = styled.div`
  float: right;
  text-align: right;
  ${props =>
    props.noLimit
      ? ``
      : `
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  `};
`
/* stylelint-enable order/properties-alphabetical-order */

export const ContractAddress = styled.a`
  color: ${theme.textStyles.assetDetail.color};
  cursor: pointer;
  text-decoration: none;
`

/* stylelint-disable order/properties-alphabetical-order */
/* stylelint-disable property-no-vendor-prefix */
export const TokenSupply = styled.h1`
  background: ${theme.gradients['menu-blue']};
  font: ${theme.textStyles.investmentH1.font};
  margin: 0;
  padding: 20px 7px 0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
`
/* stylelint-enable order/properties-alphabetical-order */
/* stylelint-enable property-no-vendor-prefix */
