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

export const InformationHeaderWrapper = styled.div`
  height: 180px;
  position: relative;
  width: 100%;
`

/* stylelint-disable order/properties-alphabetical-order */
export const Title = styled.h3`
  color: ${theme.textStyles.assetTitle.color};
  font: ${theme.textStyles.assetTitle.font};
  margin: 0;
  padding: 20px 20px 2px;
  ${theme.media.tablet`padding: 20px 100px 2px`};
`

export const ShortDescription = styled.h5`
  color: ${theme.textStyles.assetDetail.color};
  font: ${theme.textStyles.assetDetail.font};
  margin: 0;
  opacity: 0.4;
  padding: 0 0 0 20px;
  ${theme.media.tablet`padding: 0 0 0 100px;`};
`

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

export const Icon = styled.span`
  background: url('${props => props.iconSrc}') no-repeat;
  background-position: center center;
  height: 12px;
  margin-right: 5px;
  padding: 4px 12px 7px 0;
  width: 12px;
`
export const SpecsTable = styled.table`
  height: 105px;
  width: 100%;
`

export const SpecsCell = styled.td`
  padding: 0 15px;
  position: relative;
  width: 100px;
`

export const Separator = styled.div`
  background: ${theme.textStyles.assetDetail.color};
  float: right;
  height: 29px;
  opacity: 0.07;
  position: absolute;
  right: 0;
  top: 30px;
  width: 1px;
`

export const SpecsTitle = styled.h3`
  color: ${theme.textStyles.assetTitle.color};
  font: ${theme.textStyles.assetTitle.font};
  letter-spacing: -0.33px;
  margin: 0;
  text-align: center;
`

export const SpecsDetail = styled.h5`
  color: ${theme.textStyles.assetDetail.color};
  font: ${theme.textStyles.assetDetail.font};
  margin: 0;
  opacity: 0.3;
  text-align: center;
`

/* stylelint-disable block-opening-brace-space-after */
/* stylelint-disable block-closing-brace-space-before */
export const InfoWrapper = styled.div`
  float: left;
`
/* stylelint-enable block-opening-brace-space-after */
/* stylelint-enable block-closing-brace-space-before */
