"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const LogoIcon_1 = __importDefault(require("atoms/Icons/LogoIcon"));
const Button_1 = require("atoms/Button");
const VideoPresetWrapper = styled.div `
  @container();
  position: relative;
  height: rem(680);
  display: flex;
  margin: $spacing auto $spacing-small;

  /* @todo we have @desktop-or-smaller() ? */
  @media (max-width: 1200px) {
    margin-left: $spacing-small;
    margin-right: $spacing-small;
  }
  @tablet-or-smaller() {
    height: rem(425);
  }
  @phone-or-smaller() {
    height: rem(175);
    margin: 0 $spacing-extra-small $spacing-extra-small;
  }

  video {
    object-fit: fill;
    width: 100%;

    ${props => !props.isPlaying &&
    styled.css `
        &::-webkit-media-controls-panel {
          display: none;
        }
      `};
  }
`;
exports.VideoPresetWrapper = VideoPresetWrapper;
const VideoWidgetLogo = styled.div.attrs({
    children: react_1.default.createElement(LogoIcon_1.default, null),
}) `
  display: flex;
  margin-bottom: $spacing-small;

  svg {
    * {
      fill: white;
    }
    &.header-logo-svg {
      path {
        fill: $colors-main-background;
      }
      @tablet-or-smaller() {
        width: rem(70);
        height: rem(40);
      }
      @phone-or-smaller() {
        width: rem(40);
        height: rem(22);
      }
    }
  }
`;
exports.VideoWidgetLogo = VideoWidgetLogo;
const VideoTitle = styled.header `
  color: $colors-main-background;
  margin-bottom: rem(2);

  bottom: $spacing3x;
  @font (24,semi);
  @phone-or-smaller() {
    @font (14,semi);
    bottom: $spacing-small;
  }
`;
exports.VideoTitle = VideoTitle;
const VideoSlogan = styled.p `
  @font (16,semi);
  color: $colors-main-background;
  margin: 0;

  @phone-or-smaller() {
    display: none;
  }
`;
exports.VideoSlogan = VideoSlogan;
const VideoLogoPanel = styled.section `
  position: absolute;
  left: $spacing3x;
  bottom: rem(24);

  @tablet-or-smaller() {
    left: $spacing-small;
  }
`;
exports.VideoLogoPanel = VideoLogoPanel;
const VideoShareWrap = styled.div `
  color: $colors-main-background;
  display: flex;
  align-items: center;
  position: absolute;

  right: $spacing2x;
  @tablet-or-smaller() {
    right: $spacing-small;
  }

  top: $spacing;
  @font (24,semi);
  @phone-or-smaller() {
    @font (16,semi);
    top: $spacing-small;
  }
`;
exports.VideoShareWrap = VideoShareWrap;
const VideoShareText = styled.p `
  margin: 0 $spacing-small;
`;
exports.VideoShareText = VideoShareText;
// figcaption?
const VideoTimerWrap = styled.p `
  position: absolute;
  right: $spacing3x;
  bottom: rem(24);
  display: flex;
  align-items: center;
  color: $colors-main-background;
  margin: 0;

  @font (16,semi);
  @tablet-or-smaller() {
    right: $spacing-small;
  }
  @phone-or-smaller() {
    @font (14,semi);
    bottom: $spacing-small;
  }

  .video-play-icon {
    display: flex;
    align-items: center;
    svg {
      width: $spacing-big;
      height: $spacing-big;
      position: relative;
      margin: 0 $spacing-small;
    }
    @phone-or-smaller() {
      display: none;
    }
  }
`;
exports.VideoTimerWrap = VideoTimerWrap;
// adm:Text
const VideoTimerText = styled.span `
  margin-left: $spacing-small;
`;
exports.VideoTimerText = VideoTimerText;
// @todo animate play to pause
const PlayButton = styled.withComponent(Button_1.Button) `
  background: transparent;
  border: none;

  /* @todo @fixme @invalid */
  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;
//# sourceMappingURL=styled.js.map