import styled from 'styled-components'

import {
  rem
} from '../style/function.style'

export const VideoContainer = styled.div`
  position: relative;
  width: 100%;
  height: 100%;
`

export const VideoControlContainer = styled.div`
  img {
    width: ${rem(100)};
    height: ${rem(100)};
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  div[role="button"] {
    padding: 0 ${rem(40)};
    height: ${rem(48)};
    background-color: #14C4BC;
    color: #ffffff;
    font-size: ${rem(24)};
    border-radius: ${rem(92)};
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: ${rem(30)};
    display: flex;
    align-items: center;
  }
`