import styled from 'styled-components';
import {View} from 'react-native';
import {TouchableOpacity} from 'react-native';

export const VideoPlayerNativeContainer = styled(TouchableOpacity)<any>`
  position: relative;
  background: rgba(0, 0, 0, 0.9);
  width: 100%;
  height: 100%;
`;

export const ControlsContainer = styled(View)`
  position: absolute;
  bottom: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: 0px;
  align-items: center;

  margin: auto;
  width: 100%;
`;

export const IconControlContainer = styled(TouchableOpacity)<any>`
  background: white;
  width: 70px;
  height: 70px;
  border-radius: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
`;

export const SmallIconContainer = styled(TouchableOpacity)<any>`
  padding: 0px ${({theme: {spacing}}) => (spacing ? spacing[7] : 20)}px;
`;

export const IconButtonsContainer = styled(View)`
  padding: 0px 15px;
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: center;
  align-items: center;

  opacity: 0.95;
`;