"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

const tslib_1 = require("tslib");

const react_1 = tslib_1.__importDefault(require("react"));

const styleh_components_1 = require("styleh-components");

const LogoIcon_1 = tslib_1.__importDefault(require("@skava/ui/dist/components/atoms/Icons/LogoIcon"));

const Button_1 = require("@skava/ui/dist/components/atoms/Button"); // import PlayButtonIcon from 'icons/PlayIcon'

/**
 * @see https://www.youtube.com/ for cursor
 */


const VideoPresetWrapper = styleh_components_1.styled.div`cursor:pointer;max-width:75rem;margin:0 auto;;position:relative;height:42.5rem;display:flex;margin:1rem auto 0.5rem;@media (max-width:1200px){margin-left:0.5rem;margin-right:0.5rem;}@media (max-width:1023px){height:26.5625rem;}@media (max-width:767px){height:10.9375rem;margin:0 0.25rem 0.25rem;}video{object-fit:fill;width:100%;}`;
exports.VideoPresetWrapper = VideoPresetWrapper;
const VideoWidgetLogo = styleh_components_1.styled.div.attrs({
  children: react_1.default.createElement(LogoIcon_1.default, null)
})`display:flex;margin-bottom:0.5rem;svg{*{fill:white;}&.header-logo-svg{path{fill:#FFF;}@media (max-width:1023px){width:4.375rem;height:2.5rem;}@media (max-width:767px){width:2.5rem;height:1.375rem;}}}`;
exports.VideoWidgetLogo = VideoWidgetLogo;
const VideoTitle = styleh_components_1.styled.header`color:#FFF;margin-bottom:0.125rem;bottom:3rem;font:500 1.5rem "Roboto",Arial,Helvetica,sans-serif;@media (max-width:767px){font:500 0.875rem "Roboto",Arial,Helvetica,sans-serif;bottom:0.5rem;}`;
exports.VideoTitle = VideoTitle;
const VideoSlogan = styleh_components_1.styled.p`font:500 1rem "Roboto",Arial,Helvetica,sans-serif;color:#FFF;margin:0;@media (max-width:767px){display:none;}`;
exports.VideoSlogan = VideoSlogan;
const VideoLogoPanel = styleh_components_1.styled.section`position:absolute;left:3rem;bottom:1.5rem;@media (max-width:1023px){left:0.5rem;}`;
exports.VideoLogoPanel = VideoLogoPanel;
const VideoShareWrap = styleh_components_1.styled.div`color:#FFF;display:flex;align-items:center;position:absolute;right:2rem;@media (max-width:1023px){right:0.5rem;}top:1rem;font:500 1.5rem "Roboto",Arial,Helvetica,sans-serif;@media (max-width:767px){font:500 1rem "Roboto",Arial,Helvetica,sans-serif;top:0.5rem;}`;
exports.VideoShareWrap = VideoShareWrap;
const VideoShareText = styleh_components_1.styled.p`margin:0 0.5rem;`;
exports.VideoShareText = VideoShareText; // figcaption?

const VideoTimerWrap = styleh_components_1.styled.p`position:absolute;right:3rem;bottom:1.5rem;display:flex;align-items:center;color:#FFF;margin:0;font:500 1rem "Roboto",Arial,Helvetica,sans-serif;@media (max-width:1023px){right:0.5rem;}@media (max-width:767px){font:500 0.875rem "Roboto",Arial,Helvetica,sans-serif;bottom:0.5rem;}.video-play-icon{display:flex;align-items:center;svg{width:1.5rem;height:1.5rem;position:relative;margin:0 0.5rem;}@media (max-width:767px){display:none;}}`;
exports.VideoTimerWrap = VideoTimerWrap; // adm:Text

const VideoTimerText = styleh_components_1.styled.span`margin-left:0.5rem;`;
exports.VideoTimerText = VideoTimerText; // @todo animate play to pause

const PlayButton = styleh_components_1.styled(Button_1.Button)`background:transparent;border:none;pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(2,2);svg{stroke-width:1px;stroke-color:black;fill:white;}`;
exports.PlayButton = PlayButton;