"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