import styled, { css } from 'styled-components';

import { mediaMax, mediaMin } from '../../../theme/mixins';
import { BlockReview } from '../Review.style';

export const ThumbnailVideo = styled.div`
  position: relative;
  cursor: pointer;
  padding: 0!important;
  
  &:hover {
    img {
      transform: scale(1.05);
    }
  }

  i,
  :after {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
  }

  i {
    color: ${props => props.theme.default.colors.white};
    font-size: 32px;
  }

  :after {
    content: "";
    display: block;
    border-radius: 50%;
    background-color: ${props => props.theme.default.colors.white};
    opacity: .5;
    height: 80px;
    width: 80px;
  }

  img {
    width: 100%;
    height: auto;
    transition: transform 150ms ease;
  }
`;

export const BlockMainVideo = styled.div`
  display: flex;
  margin: 10px;

  ${mediaMax.medium(css`
    flex-direction: column;
    text-align: center;
  `)}
  
  ${ThumbnailVideo} {
    overflow: hidden;
    border-radius: 12px;
  }

  div:first-child {
    flex: 2;
  }

  div:last-child {
    flex: 1;
  }

  h3 {
    flex: 1;
    padding-top: 20px;
    margin: 40px 0 0 40px;
    position: relative;

    :after {
      position: absolute;
      top: 0;
      content: "";
      display: block;
      border-radius: 2px;
      height: 4px;
      width: 60px;
      background: ${props => props.theme.default.gradient.blue};
    }

    ${mediaMax.medium(css`
      margin: 40px 0 20px 0;

      :after {
        left: 50%;
        transform: translateX(-50%);
      }
    `)}
  }
`;

export const BlockVideo = styled.div`
  overflow: hidden;
  border-radius: 12px;
  background-color: ${props => props.theme.default.colors.white};
  margin: 10px;

  p {
    margin-top: 10px;
  }

  > div{
    padding: 20px;

    // bottom block
    > div{
      display: flex;
      justify-content: space-between;
      align-items: center;

      div {
        display: inline-block;

        strong,
        a {
          display: block;
        }

        img {
          max-height: 40px;
        }
      }
    }
  }
`;

export const ReviewWrapper = styled.div`
  ${mediaMin.small(css`
    > div:not(:last-child) {
      display: inline-block;
      width: 50%;
    }

    ${BlockReview} {
      display: inline-block;
      width: calc(50% - 20px);
    }
  `)}

  ${mediaMin.medium(css`
    display: flex;

    > div {
      flex: 1;
    }

    ${BlockReview} {
      display: inline-block;
      width: 100%;
    }
  `)}
`;