import styled from 'styled-components'
import { colours, screenSizes } from '../../assets/theme'

export const Box = styled.div`
  position: fixed;
  bottom: ${props => props.isMinimized ? 0 : '2em'};
  right: ${props => props.isMinimized ? 0 : '2em'};
  background-color: ${colours.white};
  padding: ${props => props.isMinimized ? '0.2em 0.2em' : '0.5em 0.5em'};
  display: flex;
  flex-direction: column;

  label {
    display: inline-block;
    margin-bottom: ${props => props.isMinimized ? 0 : '0.5em'};
    margin-right: ${props => props.isMinimized ? '0.5em' : 0};
    font-size: ${props => props.isMinimized ? '15' : '21'}px;
  }

  @media screen and (max-width: ${screenSizes.xs}px) {
    bottom: 0em;
    right: 0em;
  }
`
export const Img = styled.div`
  background: url(${({ src }) => src});
  width: 16vw;
  padding-bottom: calc((9 / 16) * 100%);
  background-size: cover;
  position: relative;
  background-position: center;
  
  @media screen and (max-width: ${screenSizes.xl}px) {
    width: 20vw;
  }

  @media screen and (max-width: ${screenSizes.lg}px) {
    width: 25vw;
  }

  @media screen and (max-width: ${screenSizes.md}px) {
    width: 33vw;
  }

  @media screen and (max-width: ${screenSizes.sm}px) {
    width: 50vw;
  }

  @media screen and (max-width: ${screenSizes.xs}px) {
    width: 60vw;
  }
`

export const Iframe = styled.iframe`
  width: 20vw;
  height: 11.2vw;
`