// @flow
import styled from 'styled-components'
import theme from 'theme'

export const TitleWrapper = styled.div`
  max-width: 50%;
`

export const SlidersWrapper = styled.div`
  background-color: ${theme.colors.white};
  border-radius: 6px;
  box-shadow: ${theme.shadows['asset-box']};
  padding: 30px 70px;
  position: relative;
  width: 900px;
`

export const FlexWrapper = styled.div`
  display: flex;
  flex-wrap: wrap;
`

export const Estimate = styled.div`
  background: ${theme.gradients['menu-blue']};
  border-radius: 18px;
  color: ${theme.colors['white']};
  font: ${theme.textStyles.boxText.font};
  height: 26px;
  left: calc(50% - 120px);
  padding: 5px 20px;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: -18px;
  width: 200px;
`

export const SlidersTitle = styled.p`
  color: ${theme.textStyles.boxTitle.color};
  display: inline;
  font-size: ${theme.fontSizes.xl};
  margin-right: 10px;
  margin-top: 10px;
  max-width: 50%;
  text-transform: uppercase;
`

export const SlidersResultBox = styled.div`
  background-color: ${theme.colors['light-grey3']};
  border-radius: 6px;
  margin-left: auto;
  max-width: 50%;
  min-width: 30%;
  padding: 10px 30px;
  text-align: center;
`
export const SlidersResultAmount = styled.p`
  color: ${theme.colors['blue-cyan']};
  font-size: ${theme.fontSizes['xxxl']};
  margin-bottom: 10px;
  margin-top: 10px;
`

export const SlidersResultText = styled.p`
  color: ${theme.textStyles.boxText.color};
  font: ${theme.textStyles.boxText.font};
  margin-bottom: 10px;
`
