import styled from 'styled-components';
import {View, TouchableOpacity, Animated} from 'react-native';
import {TouchableOpacity as TouchableOpacityGH} from 'react-native-gesture-handler';
export const VideoPlayerModalContainer = styled(View)`
  width: 100%;
  height: 220px;

  background: rgba(0, 0, 0, 0.7);
`;

export const VideoPlayerContainer = styled<any>(TouchableOpacityGH)`
  width: 100%;
`;

export const BottomOptionsContainer = styled(Animated.View)`
  background: white;
  position: relative;
  z-index: 1000;
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
`;

export const IconOptionContainer = styled(TouchableOpacity)`
  padding: 10px;
  height: 100%;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
`;

export const InfoPannelContainer = styled(Animated.View)`
  background: white;
  position: absolute;
  top: 100%;
  z-index: 2000;
  width: 100%;
  ${{
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 12,
    },
    shadowOpacity: '0.58px',
    shadowRadius: 16.0,
    elevation: '24px',
  }}
`;

export const ClosePanelContainer = styled(TouchableOpacity)`
  padding: 10px 10px;
`;