"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.injectCSS = void 0;
const remotion_1 = require("remotion");
const scroll_to_default_props_path_1 = require("../components/RenderModal/SchemaEditor/scroll-to-default-props-path");
const colors_1 = require("./colors");
const makeDefaultGlobalCSS = () => {
    const unhoveredDragAreaFactor = 2;
    const fromMiddle = 50 / unhoveredDragAreaFactor;
    const hoveredDragAreaFactor = 6;
    const fromMiddleHovered = 50 / hoveredDragAreaFactor;
    return `
	  html {
	    --remotion-cli-internals-blue: ${colors_1.BLUE};
	    --remotion-cli-internals-blue-hovered: ${colors_1.BLUE_HOVERED};
	    overscroll-behavior-y: none;
	  }

  body {
    overscroll-behavior-y: none;
    /* Override Chakra UI position: relative on body */
    position: static !important;
  }

  .remotion-splitter {
    user-select: none;
    -webkit-user-select: none;
  }

  .remotion-splitter-horizontal {
	    transform: scaleY(${unhoveredDragAreaFactor});
	    background: linear-gradient(
	      to bottom,
	      ${colors_1.TRANSPARENT} ${50 - fromMiddle}%,
	      ${colors_1.BLACK} ${50 - fromMiddle}%,
	      ${colors_1.BLACK} ${50 + fromMiddle}%,
	      ${colors_1.TRANSPARENT} ${50 + fromMiddle}%
	    );
	  }

  .remotion-splitter-horizontal.remotion-splitter-active, .remotion-splitter-horizontal.remotion-splitter-hover {
	    background: linear-gradient(
	      to bottom,
	      ${colors_1.TRANSPARENT} ${50 - fromMiddleHovered}%,
	      var(--remotion-cli-internals-blue) ${50 - fromMiddleHovered}%,
	      var(--remotion-cli-internals-blue) ${50 + fromMiddleHovered}%,
	      ${colors_1.TRANSPARENT} ${50 + fromMiddleHovered}%
	    );
    cursor: row-resize;
    transform: scaleY(${hoveredDragAreaFactor});
    z-index: 1000;
  }

  .remotion-splitter-vertical {
	    transform: scaleX(${unhoveredDragAreaFactor});
	    background: linear-gradient(
	      to right,
	      ${colors_1.TRANSPARENT} ${50 - fromMiddle}%,
	      ${colors_1.BLACK} ${50 - fromMiddle}%,
	      ${colors_1.BLACK} ${50 + fromMiddle}%,
	      ${colors_1.TRANSPARENT} ${50 + fromMiddle}%
	    );
	  }

  .remotion-splitter-vertical.remotion-splitter-active, .remotion-splitter-vertical.remotion-splitter-hover {
	    background: linear-gradient(
	      to right,
	      ${colors_1.TRANSPARENT} ${50 - fromMiddleHovered}%,
	      var(--remotion-cli-internals-blue) ${50 - fromMiddleHovered}%,
	      var(--remotion-cli-internals-blue) ${50 + fromMiddleHovered}%,
	      ${colors_1.TRANSPARENT} ${50 + fromMiddleHovered}%
	    );
    transform: scaleX(${hoveredDragAreaFactor});
    cursor: col-resize;
    z-index: 1000;
  }

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input:focus,
  textarea:focus,
  button:focus:not(.__remotion_input_dragger):not(.__remotion_color_swatch),
  a:focus {
	    outline: none;
	    box-shadow: ${colors_1.FOCUS_BOX_SHADOW};
	  }

  .__remotion_color_swatch:focus {
    outline: none;
  }

	  .__remotion_input_dragger:focus-visible {
	    outline: none;
	    box-shadow: ${colors_1.FOCUS_BOX_SHADOW};
	  }

  .__remotion_thumb,
  .__remotion_thumb::-webkit-slider-thumb {
	    -webkit-appearance: none;
	    -webkit-tap-highlight-color: ${colors_1.TRANSPARENT};
	  }

  .__remotion_thumb {
    pointer-events: none;
    position: absolute;
    height: 0;
    outline: none;
    top: 15.5px;
    width: 221px;
    margin-left: -2px;
    z-index: 2;
  }

	  /* For Firefox browsers */
	  .__remotion_thumb::-moz-range-thumb {
	    border: ${colors_1.BORDER_BLACK};
	    border-radius: 2px;
	    cursor: pointer;
	    height: 37px;
	    width: 10px;
	    pointer-events: all;
	    border-color: ${colors_1.BLACK};
	    background-color: ${colors_1.WHITE};
	    position: relative;
	  }

	  /* For Chrome browsers */
	  .__remotion_thumb::-webkit-slider-thumb {
	    border: ${colors_1.BORDER_BLACK};
	    border-radius: 2px;
	    cursor: pointer;
	    height: 39px;
	    width: 10px;
	    pointer-events: all;
	    border-color: ${colors_1.BLACK};
	    background-color: ${colors_1.WHITE};
	    position: relative;
	  }

  .__remotion_input_dragger:hover span {
    color: var(--remotion-cli-internals-blue-hovered) !important;
  }

  .${scroll_to_default_props_path_1.DEFAULT_PROPS_PATH_ACTIVE_CLASSNAME} span {
    color: var(--remotion-cli-internals-blue) !important;
    transition: color 0.2s ease-in-out;
  }
  `.trim();
};
let injected = false;
const injectCSS = () => {
    if (injected) {
        return;
    }
    remotion_1.Internals.CSSUtils.injectCSS(makeDefaultGlobalCSS());
    injected = true;
};
exports.injectCSS = injectCSS;
