import styled from 'styled-components'
import theme from 'theme'
import chart from './assets/chart.svg'

export const InvestmentDetailWrapper = styled.div`
  background: #f6f7fb;
`
/* stylelint-disable block-opening-brace-space-after */
/* stylelint-disable block-closing-brace-space-before */
export const MenuWrapper = styled.div`
  margin: 0 0 0 100px;
`
/* stylelint-enable block-opening-brace-space-after */
/* stylelint-enable block-closing-brace-space-before */

export const InfoWrapper = styled.div`
  display: ${({ visible }) => (visible ? 'block' : 'none')};
  margin: 50px 20px 0;
  ${theme.media.tablet`
    margin: 0 0 0 100px;
    width: calc(100% - 100px);
  `};
  width: calc(100% - 40px);
`

export const InvestmentDetailTitle = styled.h3`
  clear: both;
  color: ${theme.textStyles.assetTitle.color};
  font: ${theme.textStyles.investmentH3.font};
  margin: 0;
  padding: 20px 0;
`

export const DetailText = styled.div`
  color: ${theme.textStyles.boxTitle.color};
  float: left;
  font: ${theme.textStyles.boxText.font};
  margin: 0 5px 0 0;
`

export const DetailBoldText = styled.div`
  color: ${theme.textStyles.boxTitle.color};
  font: ${theme.textStyles.boxTitle.font};
  padding: 2px 0 0;
`

export const DetailWrapper = styled.div`
  float: left;
  width: 400px;
`

export const SpecsWrapper = styled.div`
  clear: both;
  max-width: 800px;
  width: 100%;
`

export const Spacer = styled.div`
  background: ${theme.textStyles.assetDetail.color};
  clear: both;
  float: left;
  height: 1px;
  margin: 40px 0 0;
  max-width: 800px;
  opacity: 0.07;
  width: 100%;
`

export const LineChart = styled.div`
  background: url('${chart}') no-repeat;
  background-position: center center;
  height: 230px;
  max-width: 750px;
  width: 100%;
`

export const GoogleMaps = styled.div`
  height: 430px;
  margin-bottom: 50px;
  max-width: 800px;
  overflow: hidden;
  position: relative;
  width: 100%;
`

/* stylelint-disable declaration-no-important */
export const GmapsIframe = styled.iframe`
  border: 0;
  height: 100% !important;
  left: 0;
  position: absolute;
  top: 0;
  width: 100% !important;
`
/* stylelint-enable declaration-no-important */

export const SpecPrice = styled.div`
  clear: both;
  float: left;
  margin: 30px 0 0;
  width: 100%;
`

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

export const PropertyWrapper = styled.div`
  float: left;
  margin: 0 30px 0 0;
`

export const IconSpecWrapper = styled.div`
  background: url('${props => props.iconSrc}') no-repeat;
  background-position: center center;
  height: 17px;
  margin: 0 auto;
  padding: 4px 7px 7px 0;
  width: 17px;
`

export const LabelSpec = styled.h6`
  color: ${theme.colors['light-grey2']};
  font: ${theme.textStyles.navbarMenu.font};
  margin: 10px 0 0;
`

/* stylelint-disable block-opening-brace-space-after */
/* stylelint-disable block-closing-brace-space-before */
export const DetailTextWrapper = styled.div`
  max-width: 800px;
  width: 100%;
`
/* stylelint-enable block-opening-brace-space-after */
/* stylelint-enable block-closing-brace-space-before */
