"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const foundations_1 = __importDefault(require("../../theme/foundations"));
const utils_1 = require("../../utils");
const styled_1 = require("../styled");
const animations_1 = require("./animations");
const consts_1 = require("./consts");
const fontFaces_1 = __importDefault(require("./fontFaces"));
/**
 * Provides global styles, such as:
 * - font face definitions
 * - font base styles (color, size, family)
 * - animation keyframes
 * - CSS variables for each theme value
 */
exports.default = (0, styled_1.createGlobalStyle) `
  ${fontFaces_1.default}
  :root {
    ${generateCSSVariables}
  }

  * {
    --x-ring-color: var(--vui-colors-focusColor);
    // Fixes a box-shadow issue between some parent and child components
    --x-shadow: 0 0 0 0 transparent;
  }

  button,
  .vui-avatar,
  .vui-tag,
  .vui-sidemenu-item,
  .vui-switchTrack {
    --x-ring-color: transparent;
  }

  button:focus-visible,
  li:focus-visible,
  .vui-avatar:focus-visible,
  .vui-tag:focus-visible,
  .vui-sidemenu-item:focus-visible,
  .vui-switchTrack:focus-visible {
    --x-ring-color: var(--vui-colors-focusColor);
    outline: var(--vui-colors-focusColor) solid 3px;
    z-index: 1;
  }

  body.${consts_1.noScrollClass} {
    overflow: hidden !important;
    overscroll-behavior: contain;
  }

  //@formatter:off
  ${p => p.globalStyle &&
    (0, styled_1.css) `
      body {
        color: sandstone.10;
        font-family: avenir;
        font-size: md;
      }

      h1,
      h2,
      h3,
      h4,
      h5 {
        color: darkBlue.18;
      }
    `}

  //@formatter:on
  @keyframes vui-bounce {
  ${animations_1.bounce}
  }

  @keyframes vui-fadeDown {
  ${(0, animations_1.fadeDown)(20)}
  }

  @keyframes vui-fadeIn {
  ${animations_1.fadeIn}
  }

  @keyframes vui-fadeLeft {
  ${(0, animations_1.fadeLeft)(20)}
  }

  @keyframes vui-fadeLeftLong {
  ${(0, animations_1.fadeLeft)(600)}
  }

  @keyframes vui-fadeOut {
  ${animations_1.fadeOut}
  }


  @keyframes vui-fadeRight {
  ${(0, animations_1.fadeRight)(20)}
  }

  @keyframes vui-fadeRightLong {
  ${(0, animations_1.fadeRight)(600)}
  }

  @keyframes vui-fadeUp {
  ${(0, animations_1.fadeUp)(20)}
  }

  @keyframes vui-pulse {
  ${animations_1.pulse}
  }

  @keyframes vui-spin {
  ${animations_1.spin}
  }
`;
/** Recursively maps through all theme styles and generates a set of CSS properties. */
function generateCSSVariables() {
    function computeStyle(name, value) {
        if (!(0, utils_1.isObject)(value))
            return `${name}: ${typeof value === 'string' ? value : `${value}px`};\n`;
        return Object.entries(value).reduce((str, [key, value]) => {
            return (str += computeStyle(`${name}-${key}`, value));
        }, '');
    }
    const { animations, transformers } = foundations_1.default, styles = __rest(foundations_1.default, ["animations", "transformers"]);
    return computeStyle('--vui', styles);
}
//# sourceMappingURL=globalStyle.js.map