import styled from 'styled-components'
import theme from 'theme'
import securedMark from '../AssetBox/assets/secured.svg'

export const InvestmentWrapper = styled.div`
  background: ${theme.colors.white};
  border-radius: 6px;
  box-shadow: ${theme.shadows['asset-box']};
  height: 443px;
  position: relative;
  width: 337px;
  z-index: 1;
`

export const SecuredMark = styled.span`
  background: url('${securedMark}') no-repeat;
  color: ${theme.textStyles.secured.color};
  font: ${theme.textStyles.secured.font};
  height: 26px;
  left: 105px;
  letter-spacing: 0.55px;
  padding: 5px 0 0 42px;
  position: absolute;
  text-transform: uppercase;
  top: -17px;
  width: 109px;
`

export const InvestButtonWrapper = styled.div`
  background-color: ${theme.colors['dodger-blue']};
  border: none;
  border-radius: 6px;
  color: ${theme.colors.white};
  cursor: pointer;
  display: inline-block;
  font: ${theme.textStyles.clearButton.font};
  letter-spacing: 1.09px;
  line-height: 40px;
  margin: 15px 40px;
  opacity: ${props => (!props.disabled ? '1' : '0.6')};
  padding: 3px 0;
  position: relative;
  text-align: center;
  text-transform: uppercase;
`

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

export const InvestmentInfoWrapper = styled.div`
  background: ${theme.colors['dark-grey']};
  border-radius: 0 0 6px 6px;
  height: 228px;
  position: absolute;
  top: 215px;
  width: 100%;
`

export const Whitener = styled.div`
  filter: brightness(0) invert(1);
  float: right;
  position: absolute;
  right: 25px;
  top: 2px;
`

export const TokensFunded = styled.span`
  color: ${theme.colors['aqua']};
`
