import { mixinRobotoFont } from '@genesislcap/foundation-zero';
import { css } from '@microsoft/fast-element';
import { tagFor } from '@genesislcap/foundation-ui';
/**
 * @public
 * @privateRemarks
 * Options cam be used to target unknown component tags in the css, such as:
 * const buttonTag = tagFor(options.button);
 * ...
 * ${buttonTag} {
 *   width: 200px;
 * }
 */
export const styles = (options) => {
    const providerTag = tagFor(options.provider); // < technically if this is `template` we wouldn't need it, as that's covered by :host
    const routerTag = tagFor(options.router);
    return css `
    ${mixinRobotoFont()}
    :host {
      contain: content;
    }

    :host,
    ${providerTag}, ${routerTag} {
      display: flex;
      width: 100%;
      height: 100%;
    }

    :host([hidden]) {
      display: none;
    }

    :host:not(:defined) {
      visibility: hidden;
    }
  `;
};
//# sourceMappingURL=main.styles.js.map