@riovir/wc-fontawesome/dist/index-standalone.mjs

Web components for Font Awesome

/* Extracted from @fortawesome/fontawesome-svg-core/styles.css v6.3.0 */
const css = /* css */`
:root, :host {
  --fa-font-solid: normal 900 1em/1 'Font Awesome 6 Solid';
  --fa-font-regular: normal 400 1em/1 'Font Awesome 6 Regular';
  --fa-font-light: normal 300 1em/1 'Font Awesome 6 Light';
  --fa-font-thin: normal 100 1em/1 'Font Awesome 6 Thin';
  --fa-font-duotone: normal 900 1em/1 'Font Awesome 6 Duotone';
  --fa-font-sharp-solid: normal 900 1em/1 'Font Awesome 6 Sharp';
  --fa-font-sharp-regular: normal 400 1em/1 'Font Awesome 6 Sharp';
  --fa-font-brands: normal 400 1em/1 'Font Awesome 6 Brands'; }

svg:not(:root).svg-inline--fa, svg:not(:host).svg-inline--fa {
  overflow: visible;
  box-sizing: content-box; }

.svg-inline--fa {
  display: var(--fa-display, inline-block);
  height: 1em;
  overflow: visible;
  vertical-align: -.125em; }
  .svg-inline--fa.fa-2xs {
    vertical-align: 0.1em; }
  .svg-inline--fa.fa-xs {
    vertical-align: 0em; }
  .svg-inline--fa.fa-sm {
    vertical-align: -0.07143em; }
  .svg-inline--fa.fa-lg {
    vertical-align: -0.2em; }
  .svg-inline--fa.fa-xl {
    vertical-align: -0.25em; }
  .svg-inline--fa.fa-2xl {
    vertical-align: -0.3125em; }
  .svg-inline--fa.fa-pull-left {
    margin-right: var(--fa-pull-margin, 0.3em);
    width: auto; }
  .svg-inline--fa.fa-pull-right {
    margin-left: var(--fa-pull-margin, 0.3em);
    width: auto; }
  .svg-inline--fa.fa-li {
    width: var(--fa-li-width, 2em);
    top: 0.25em; }
  .svg-inline--fa.fa-fw {
    width: var(--fa-fw-width, 1.25em); }

.fa-layers svg.svg-inline--fa {
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0; }

.fa-layers-text, .fa-layers-counter {
  display: inline-block;
  position: absolute;
  text-align: center; }

.fa-layers {
  display: inline-block;
  height: 1em;
  position: relative;
  text-align: center;
  vertical-align: -.125em;
  width: 1em; }
  .fa-layers svg.svg-inline--fa {
    -webkit-transform-origin: center center;
            transform-origin: center center; }

.fa-layers-text {
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transform-origin: center center;
          transform-origin: center center; }

.fa-layers-counter {
  background-color: var(--fa-counter-background-color, #ff253a);
  border-radius: var(--fa-counter-border-radius, 1em);
  box-sizing: border-box;
  color: var(--fa-inverse, #fff);
  line-height: var(--fa-counter-line-height, 1);
  max-width: var(--fa-counter-max-width, 5em);
  min-width: var(--fa-counter-min-width, 1.5em);
  overflow: hidden;
  padding: var(--fa-counter-padding, 0.25em 0.5em);
  right: var(--fa-right, 0);
  text-overflow: ellipsis;
  top: var(--fa-top, 0);
  -webkit-transform: scale(var(--fa-counter-scale, 0.25));
          transform: scale(var(--fa-counter-scale, 0.25));
  -webkit-transform-origin: top right;
          transform-origin: top right; }

.fa-layers-bottom-right {
  bottom: var(--fa-bottom, 0);
  right: var(--fa-right, 0);
  top: auto;
  -webkit-transform: scale(var(--fa-layers-scale, 0.25));
          transform: scale(var(--fa-layers-scale, 0.25));
  -webkit-transform-origin: bottom right;
          transform-origin: bottom right; }

.fa-layers-bottom-left {
  bottom: var(--fa-bottom, 0);
  left: var(--fa-left, 0);
  right: auto;
  top: auto;
  -webkit-transform: scale(var(--fa-layers-scale, 0.25));
          transform: scale(var(--fa-layers-scale, 0.25));
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left; }

.fa-layers-top-right {
  top: var(--fa-top, 0);
  right: var(--fa-right, 0);
  -webkit-transform: scale(var(--fa-layers-scale, 0.25));
          transform: scale(var(--fa-layers-scale, 0.25));
  -webkit-transform-origin: top right;
          transform-origin: top right; }

.fa-layers-top-left {
  left: var(--fa-left, 0);
  right: auto;
  top: var(--fa-top, 0);
  -webkit-transform: scale(var(--fa-layers-scale, 0.25));
          transform: scale(var(--fa-layers-scale, 0.25));
  -webkit-transform-origin: top left;
          transform-origin: top left; }

.fa-1x {
  font-size: 1em; }

.fa-2x {
  font-size: 2em; }

.fa-3x {
  font-size: 3em; }

.fa-4x {
  font-size: 4em; }

.fa-5x {
  font-size: 5em; }

.fa-6x {
  font-size: 6em; }

.fa-7x {
  font-size: 7em; }

.fa-8x {
  font-size: 8em; }

.fa-9x {
  font-size: 9em; }

.fa-10x {
  font-size: 10em; }

.fa-2xs {
  font-size: 0.625em;
  line-height: 0.1em;
  vertical-align: 0.225em; }

.fa-xs {
  font-size: 0.75em;
  line-height: 0.08333em;
  vertical-align: 0.125em; }

.fa-sm {
  font-size: 0.875em;
  line-height: 0.07143em;
  vertical-align: 0.05357em; }

.fa-lg {
  font-size: 1.25em;
  line-height: 0.05em;
  vertical-align: -0.075em; }

.fa-xl {
  font-size: 1.5em;
  line-height: 0.04167em;
  vertical-align: -0.125em; }

.fa-2xl {
  font-size: 2em;
  line-height: 0.03125em;
  vertical-align: -0.1875em; }

.fa-fw {
  text-align: center;
  width: 1.25em; }

.fa-ul {
  list-style-type: none;
  margin-left: var(--fa-li-margin, 2.5em);
  padding-left: 0; }
  .fa-ul > li {
    position: relative; }

.fa-li {
  left: calc(var(--fa-li-width, 2em) * -1);
  position: absolute;
  text-align: center;
  width: var(--fa-li-width, 2em);
  line-height: inherit; }

.fa-border {
  border-color: var(--fa-border-color, #eee);
  border-radius: var(--fa-border-radius, 0.1em);
  border-style: var(--fa-border-style, solid);
  border-width: var(--fa-border-width, 0.08em);
  padding: var(--fa-border-padding, 0.2em 0.25em 0.15em); }

.fa-pull-left {
  float: left;
  margin-right: var(--fa-pull-margin, 0.3em); }

.fa-pull-right {
  float: right;
  margin-left: var(--fa-pull-margin, 0.3em); }

.fa-beat {
  -webkit-animation-name: fa-beat;
          animation-name: fa-beat;
  -webkit-animation-delay: var(--fa-animation-delay, 0s);
          animation-delay: var(--fa-animation-delay, 0s);
  -webkit-animation-direction: var(--fa-animation-direction, normal);
          animation-direction: var(--fa-animation-direction, normal);
  -webkit-animation-duration: var(--fa-animation-duration, 1s);
          animation-duration: var(--fa-animation-duration, 1s);
  -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
          animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  -webkit-animation-timing-function: var(--fa-animation-timing, ease-in-out);
          animation-timing-function: var(--fa-animation-timing, ease-in-out); }

.fa-bounce {
  -webkit-animation-name: fa-bounce;
          animation-name: fa-bounce;
  -webkit-animation-delay: var(--fa-animation-delay, 0s);
          animation-delay: var(--fa-animation-delay, 0s);
  -webkit-animation-direction: var(--fa-animation-direction, normal);
          animation-direction: var(--fa-animation-direction, normal);
  -webkit-animation-duration: var(--fa-animation-duration, 1s);
          animation-duration: var(--fa-animation-duration, 1s);
  -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
          animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  -webkit-animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1));
          animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1)); }

.fa-fade {
  -webkit-animation-name: fa-fade;
          animation-name: fa-fade;
  -webkit-animation-delay: var(--fa-animation-delay, 0s);
          animation-delay: var(--fa-animation-delay, 0s);
  -webkit-animation-direction: var(--fa-animation-direction, normal);
          animation-direction: var(--fa-animation-direction, normal);
  -webkit-animation-duration: var(--fa-animation-duration, 1s);
          animation-duration: var(--fa-animation-duration, 1s);
  -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
          animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  -webkit-animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
          animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); }

.fa-beat-fade {
  -webkit-animation-name: fa-beat-fade;
          animation-name: fa-beat-fade;
  -webkit-animation-delay: var(--fa-animation-delay, 0s);
          animation-delay: var(--fa-animation-delay, 0s);
  -webkit-animation-direction: var(--fa-animation-direction, normal);
          animation-direction: var(--fa-animation-direction, normal);
  -webkit-animation-duration: var(--fa-animation-duration, 1s);
          animation-duration: var(--fa-animation-duration, 1s);
  -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
          animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  -webkit-animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
          animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); }

.fa-flip {
  -webkit-animation-name: fa-flip;
          animation-name: fa-flip;
  -webkit-animation-delay: var(--fa-animation-delay, 0s);
          animation-delay: var(--fa-animation-delay, 0s);
  -webkit-animation-direction: var(--fa-animation-direction, normal);
          animation-direction: var(--fa-animation-direction, normal);
  -webkit-animation-duration: var(--fa-animation-duration, 1s);
          animation-duration: var(--fa-animation-duration, 1s);
  -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
          animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  -webkit-animation-timing-function: var(--fa-animation-timing, ease-in-out);
          animation-timing-function: var(--fa-animation-timing, ease-in-out); }

.fa-shake {
  -webkit-animation-name: fa-shake;
          animation-name: fa-shake;
  -webkit-animation-delay: var(--fa-animation-delay, 0s);
          animation-delay: var(--fa-animation-delay, 0s);
  -webkit-animation-direction: var(--fa-animation-direction, normal);
          animation-direction: var(--fa-animation-direction, normal);
  -webkit-animation-duration: var(--fa-animation-duration, 1s);
          animation-duration: var(--fa-animation-duration, 1s);
  -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
          animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  -webkit-animation-timing-function: var(--fa-animation-timing, linear);
          animation-timing-function: var(--fa-animation-timing, linear); }

.fa-spin {
  -webkit-animation-name: fa-spin;
          animation-name: fa-spin;
  -webkit-animation-delay: var(--fa-animation-delay, 0s);
          animation-delay: var(--fa-animation-delay, 0s);
  -webkit-animation-direction: var(--fa-animation-direction, normal);
          animation-direction: var(--fa-animation-direction, normal);
  -webkit-animation-duration: var(--fa-animation-duration, 2s);
          animation-duration: var(--fa-animation-duration, 2s);
  -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
          animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  -webkit-animation-timing-function: var(--fa-animation-timing, linear);
          animation-timing-function: var(--fa-animation-timing, linear); }

.fa-spin-reverse {
  --fa-animation-direction: reverse; }

.fa-pulse,
.fa-spin-pulse {
  -webkit-animation-name: fa-spin;
          animation-name: fa-spin;
  -webkit-animation-direction: var(--fa-animation-direction, normal);
          animation-direction: var(--fa-animation-direction, normal);
  -webkit-animation-duration: var(--fa-animation-duration, 1s);
          animation-duration: var(--fa-animation-duration, 1s);
  -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
          animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  -webkit-animation-timing-function: var(--fa-animation-timing, steps(8));
          animation-timing-function: var(--fa-animation-timing, steps(8)); }

@media (prefers-reduced-motion: reduce) {
  .fa-beat,
  .fa-bounce,
  .fa-fade,
  .fa-beat-fade,
  .fa-flip,
  .fa-pulse,
  .fa-shake,
  .fa-spin,
  .fa-spin-pulse {
    -webkit-animation-delay: -1ms;
            animation-delay: -1ms;
    -webkit-animation-duration: 1ms;
            animation-duration: 1ms;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-transition-delay: 0s;
            transition-delay: 0s;
    -webkit-transition-duration: 0s;
            transition-duration: 0s; } }

@-webkit-keyframes fa-beat {
  0%, 90% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  45% {
    -webkit-transform: scale(var(--fa-beat-scale, 1.25));
            transform: scale(var(--fa-beat-scale, 1.25)); } }

@keyframes fa-beat {
  0%, 90% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  45% {
    -webkit-transform: scale(var(--fa-beat-scale, 1.25));
            transform: scale(var(--fa-beat-scale, 1.25)); } }

@-webkit-keyframes fa-bounce {
  0% {
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0); }
  10% {
    -webkit-transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0);
            transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0); }
  30% {
    -webkit-transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em));
            transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em)); }
  50% {
    -webkit-transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0);
            transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0); }
  57% {
    -webkit-transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));
            transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em)); }
  64% {
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0); }
  100% {
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0); } }

@keyframes fa-bounce {
  0% {
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0); }
  10% {
    -webkit-transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0);
            transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0); }
  30% {
    -webkit-transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em));
            transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em)); }
  50% {
    -webkit-transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0);
            transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0); }
  57% {
    -webkit-transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));
            transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em)); }
  64% {
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0); }
  100% {
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0); } }

@-webkit-keyframes fa-fade {
  50% {
    opacity: var(--fa-fade-opacity, 0.4); } }

@keyframes fa-fade {
  50% {
    opacity: var(--fa-fade-opacity, 0.4); } }

@-webkit-keyframes fa-beat-fade {
  0%, 100% {
    opacity: var(--fa-beat-fade-opacity, 0.4);
    -webkit-transform: scale(1);
            transform: scale(1); }
  50% {
    opacity: 1;
    -webkit-transform: scale(var(--fa-beat-fade-scale, 1.125));
            transform: scale(var(--fa-beat-fade-scale, 1.125)); } }

@keyframes fa-beat-fade {
  0%, 100% {
    opacity: var(--fa-beat-fade-opacity, 0.4);
    -webkit-transform: scale(1);
            transform: scale(1); }
  50% {
    opacity: 1;
    -webkit-transform: scale(var(--fa-beat-fade-scale, 1.125));
            transform: scale(var(--fa-beat-fade-scale, 1.125)); } }

@-webkit-keyframes fa-flip {
  50% {
    -webkit-transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg));
            transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg)); } }

@keyframes fa-flip {
  50% {
    -webkit-transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg));
            transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg)); } }

@-webkit-keyframes fa-shake {
  0% {
    -webkit-transform: rotate(-15deg);
            transform: rotate(-15deg); }
  4% {
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg); }
  8%, 24% {
    -webkit-transform: rotate(-18deg);
            transform: rotate(-18deg); }
  12%, 28% {
    -webkit-transform: rotate(18deg);
            transform: rotate(18deg); }
  16% {
    -webkit-transform: rotate(-22deg);
            transform: rotate(-22deg); }
  20% {
    -webkit-transform: rotate(22deg);
            transform: rotate(22deg); }
  32% {
    -webkit-transform: rotate(-12deg);
            transform: rotate(-12deg); }
  36% {
    -webkit-transform: rotate(12deg);
            transform: rotate(12deg); }
  40%, 100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); } }

@keyframes fa-shake {
  0% {
    -webkit-transform: rotate(-15deg);
            transform: rotate(-15deg); }
  4% {
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg); }
  8%, 24% {
    -webkit-transform: rotate(-18deg);
            transform: rotate(-18deg); }
  12%, 28% {
    -webkit-transform: rotate(18deg);
            transform: rotate(18deg); }
  16% {
    -webkit-transform: rotate(-22deg);
            transform: rotate(-22deg); }
  20% {
    -webkit-transform: rotate(22deg);
            transform: rotate(22deg); }
  32% {
    -webkit-transform: rotate(-12deg);
            transform: rotate(-12deg); }
  36% {
    -webkit-transform: rotate(12deg);
            transform: rotate(12deg); }
  40%, 100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); } }

@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

.fa-rotate-90 {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg); }

.fa-rotate-180 {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg); }

.fa-rotate-270 {
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg); }

.fa-flip-horizontal {
  -webkit-transform: scale(-1, 1);
          transform: scale(-1, 1); }

.fa-flip-vertical {
  -webkit-transform: scale(1, -1);
          transform: scale(1, -1); }

.fa-flip-both,
.fa-flip-horizontal.fa-flip-vertical {
  -webkit-transform: scale(-1, -1);
          transform: scale(-1, -1); }

.fa-rotate-by {
  -webkit-transform: rotate(var(--fa-rotate-angle, none));
          transform: rotate(var(--fa-rotate-angle, none)); }

.fa-stack {
  display: inline-block;
  vertical-align: middle;
  height: 2em;
  position: relative;
  width: 2.5em; }

.fa-stack-1x,
.fa-stack-2x {
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  z-index: var(--fa-stack-z-index, auto); }

.svg-inline--fa.fa-stack-1x {
  height: 1em;
  width: 1.25em; }

.svg-inline--fa.fa-stack-2x {
  height: 2em;
  width: 2.5em; }

.fa-inverse {
  color: var(--fa-inverse, #fff); }

.sr-only,
.fa-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0; }

.sr-only-focusable:not(:focus),
.fa-sr-only-focusable:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0; }

.svg-inline--fa .fa-primary {
  fill: var(--fa-primary-color, currentColor);
  opacity: var(--fa-primary-opacity, 1); }

.svg-inline--fa .fa-secondary {
  fill: var(--fa-secondary-color, currentColor);
  opacity: var(--fa-secondary-opacity, 0.4); }

.svg-inline--fa.fa-swap-opacity .fa-primary {
  opacity: var(--fa-secondary-opacity, 0.4); }

.svg-inline--fa.fa-swap-opacity .fa-secondary {
  opacity: var(--fa-primary-opacity, 1); }

.svg-inline--fa mask .fa-primary,
.svg-inline--fa mask .fa-secondary {
  fill: black; }

.fad.fa-inverse,
.fa-duotone.fa-inverse {
  color: var(--fa-inverse, #fff); }

`;

const canAdoptStylesheet = ('adoptedStyleSheets' in document);

const Stylesheet = ({ css }) => {
	try {
		const sheet = new CSSStyleSheet();
		sheet.replaceSync(css);
		return sheet;
	}
	catch { return; }
};

const StyleTemplate = ({ css }) => {
	const template = document.createElement('template');
	template.innerHTML = /* html */`
		<style>${css}</style>
	`;
	return template;
};

const styleSheet = canAdoptStylesheet ? Stylesheet({ css }) : null;
const styleTemplate = !styleSheet ? StyleTemplate({ css }) : null;

const applyConstructedStyleWith = ({ css }) => {
	const ownCss = Stylesheet({ css });
	return host => {
		host.shadowRoot.adoptedStyleSheets = [styleSheet, ownCss];
	};
};

const applyInlineStyleWith = ({ css }) => {
	const IS_APPLIED = Symbol('is-applied');
	const ownCss = StyleTemplate({ css });
	return host => {
		if (host[IS_APPLIED]) { return; }
		host[IS_APPLIED] = true;
		host.shadowRoot.appendChild(styleTemplate.content.cloneNode(true));
		host.shadowRoot.appendChild(ownCss.content.cloneNode(true));
	};
};

const applyStyleWith = styleSheet ?
	applyConstructedStyleWith :
	applyInlineStyleWith;

function definePropsOn({ prototype }, props) {
	for (const [name, prop] of Object.entries(props)) {
		defineOn(prototype, name, prop);
	}
	prototype.connectedCallback = function connectedCallback() {
		for (const [prop, { connect = () => {} }] of Object.entries(props)) {
			connect(this, prop);
		}
	};
}

function defineOn(object, propName, { get, set, observe = () => {}, defaultValue }) {
	const _get = get || ((_, value) => value);
	const _set = set || ((_, value) => value);
	const _cache = Symbol(`cached-${propName}`);
	object[_cache] = defaultValue;
	Object.defineProperty(object, propName, {
		get() {
			const lastValue = this[_cache];
			this[_cache] = _get(this, this[_cache]);
			if (this[_cache] !== lastValue) {
				observe(this, this[_cache], lastValue);
			}
			return this[_cache];
		},
		set(value) {
			const lastValue = this[_cache];
			const result = _set(this, value, this[_cache]);
			if (result === undefined) { return; }
			this[_cache] = _get(this, result);
			if (lastValue === this[_cache]) { return; }
			observe(this, this[_cache], lastValue);
		},
		enumerable: true,
		configurable: false,
	});
}

function Prop({ attribute, defaultValue, ...rest }) {
	return { connect: initPropFrom(attribute, defaultValue), defaultValue, ...rest };
}

function BooleanProp({ defaultValue = false, set = (_, value) => value, ...rest }) {
	const setBoolean = (host, value) => set(host, Boolean(value));
	return Prop({ defaultValue, set: setBoolean, ...rest });
}

function StringProp({ defaultValue = '', set = (_, value) => value, ...rest }) {
	const setString = (host, value) => set(host, asString(value));
	return Prop({ defaultValue, set: setString, ...rest });
}

function ObjectOrStringProp({ defaultValue = '', set = (_, value) => value, ...rest }) {
	const setObjectOrString = (host, value) => {
		const coercedValue = typeof value === 'object' ? value : asString(value);
		return set(host, coercedValue);
	};
	return Prop({ defaultValue, set: setObjectOrString, ...rest });
}

function asString(value) {
	return value === null || value === undefined ? '' : String(value);
}

function initPropFrom(attribute, defaultValue) {
	const valueOf = typeof defaultValue === 'boolean' ?
		() => true :
		host => host.getAttribute(attribute);
	return (host, key) => {
		if (!host.hasAttribute(attribute)) { return; }
		host[key] = valueOf(host);
	};
}

let _findIconDefinition;
let _icon;
let _text;
let _parse;

function use({ findIconDefinition, icon, text, parse }) {
	_findIconDefinition = findIconDefinition;
	_icon = icon;
	_text = text;
	_parse = parse;
}

function resolve(icon) {
	if (!_findIconDefinition) { return icon; }
	if (typeof icon === 'string') {
		return _findIconDefinition({ iconName: icon });
	}
	if (icon && 2 <= icon.length) {
		return _findIconDefinition({ prefix: icon[0], iconName: icon[1] });
	}
	return icon;
}

function iconToHtml(...args) {
	return _icon ? pick('html', _icon(...args)) : undefined;
}

function textToHtml(...args) {
	return _text ? pick('html', _text(...args)) : undefined;
}

function parseTransform(...args) {
	return _parse ? _parse.transform(...args) : undefined;
}

function pick(prop, object) {
	if (!object) { return; }
	return object[prop];
}

function updateElementClass(prop, name) {
	if (name === undefined) {
		return name => updateElementClass(prop, name);
	}
	const classOf = (name, value) => typeof name === 'function' ? name(strictEscape(value)) : name;
	return (host, value, lastValue) => {
		if (!lastValue && !value) { return; }
		host[prop].classList.remove(classOf(name, lastValue));
		if (!value) { return; }
		host[prop].classList.add(classOf(name, value));
	};
}

function strictEscape(className) {
	return className ? className.replace(/[^0-9a-zA-Z-_]/g, '') : '';
}

function setHostAttribute(attribute) {
	return (host, value) => host.setAttribute(attribute, value);
}

const BLANK_ICON = { icon: [] };
const applyStyle$2 = applyStyleWith({ css: /* css */`
:host {
	box-sizing: border-box;
	display: inline-block;
	line-height: 1; }

:host([pull="left"]) {
	float: left;
	margin-right: .3em; }

:host([pull="right"]) {
	float: right;
	margin-left: .3em; }
` });

const template$2 = document.createElement('template');
template$2.innerHTML = toHtmlFallback$1(BLANK_ICON);

function toHtmlFallback$1({ icon = [] } = {}) {
	const [width = 1, height = 1, /**/, /**/, path = ''] = icon;
	const content = Array.isArray(path) ?
		`<g class="fa-group">
			<path class="fa-secondary" fill="currentColor" d="${path[1]}" />
			<path class="fa-primary" fill="currentColor" d="${path[0]}" />
		</g>` :
		`<path fill="currentColor" d="${path}" />`;
	return [/* html */`<svg
			class="svg-inline--fa"
			aria-hidden="true"
			role="img"
			focusable="false"
			xmlns="http://www.w3.org/2000/svg"
			viewBox="0 0 ${width} ${height}"
		>
			${content}
		</svg>`,
	];
}

const Internal$2 = {
	SVG: Symbol('svg'),
	PATH_PRIMARY: Symbol('path-primary'),
	PATH_SECONDARY: Symbol('path-secondary'),
	NEEDS_REDRAW: Symbol('needs-complete-redraw-of-structure'),
};

const updateSvgClass = updateElementClass(Internal$2.SVG);
const prefixSvgClass = prefix => updateSvgClass(value => prefix.concat(value));

const Props$2 = {
	_init: { connect: initAriaAttributes },

	icon: ObjectOrStringProp({ attribute: 'icon', observe: updateIcon	}),
	resolvedIcon: { get: ({ icon, _resolve }) => _resolve(icon) },
	isDuotone: { get: isDuotone },

	transform: ObjectOrStringProp({ attribute: 'transform', observe: updateIcon }),
	parsedTransform: { get: resolveTransform },

	size: StringProp({ attribute: 'size', observe: prefixSvgClass('fa-') }),
	rotation: StringProp({ attribute: 'rotation', observe: prefixSvgClass('fa-rotate-') }),
	flip: StringProp({ attribute: 'flip', observe: prefixSvgClass('fa-flip-') }),
	pull: StringProp({ attribute: 'pull', observe: setHostAttribute('pull') }),

	mask: ObjectOrStringProp({ attribute: 'mask', observe: updateIcon }),
	resolvedMask: { get: ({ mask, _resolve }) => _resolve(mask) },

	fixedWidth: BooleanProp({ attribute: 'fixed-width', observe: updateSvgClass('fa-fw') }),
	spin: BooleanProp({ attribute: 'spin', observe: updateSvgClass('fa-spin') }),
	pulse: BooleanProp({ attribute: 'pulse', observe: updateSvgClass('fa-pulse') }),

	inverse: BooleanProp({ attribute: 'inverse', observe: updateSvgClass('fa-inverse') }),
	swapOpacity: BooleanProp({ attribute: 'swap-opacity', observe: updateSvgClass('fa-swap-opacity') }),
};

class FontAwesomeIcon extends HTMLElement {
	constructor() {
		super();
		const shadowRoot = this.attachShadow({ mode: 'open' });
		shadowRoot.appendChild(template$2.content.cloneNode(true));
		applyStyle$2(this);
		this[Internal$2.SVG] = shadowRoot.querySelector('svg');
		this[Internal$2.PATH_PRIMARY] = shadowRoot.querySelector('path');
		this[Internal$2.NEEDS_REDRAW] = host => host.isDuotone || host.transform || host.mask;
		this._toHtml = iconToHtml;
		this._resolve = resolve;
		this._parseTransform = parseTransform;
		this.spin = false;
	}
}
definePropsOn(FontAwesomeIcon, Props$2);

function initAriaAttributes(host) {
	const hasAccessibleName = host.getAttribute('aria-label') || host.getAttribute('title') || host.getAttribute('aria-labelledby');
	if (host.hasAttribute('role') || hasAccessibleName) { return; }

	host.setAttribute('role', 'presentation');
}

function isDuotone({ resolvedIcon }) {
	return resolvedIcon && resolvedIcon.icon && Array.isArray(resolvedIcon.icon[4]);
}

function updateIcon(host) {
	if (host[Internal$2.NEEDS_REDRAW](host)) {
		redrawElements$1(host);
	}
	else {
		updateShapes(host);
	}
}

function redrawElements$1(host) {
	const classes = host[Internal$2.SVG].classList;
	host[Internal$2.SVG].remove();

	const options = {
		transform: host.parsedTransform,
		mask: host.resolvedMask,
	};
	const [svg] = host._toHtml(host.resolvedIcon, options) || toHtmlFallback$1(host.resolvedIcon);
	host.shadowRoot.innerHTML = host.shadowRoot.innerHTML.concat(svg);
	host[Internal$2.SVG] = host.shadowRoot.querySelector('svg');
	host[Internal$2.SVG].classList.add(...classes);

	const paths = host.shadowRoot.querySelectorAll('path');
	host[Internal$2.PATH_PRIMARY] = paths[1] ? paths[1] : paths[0];
	host[Internal$2.PATH_SECONDARY] = paths[1] ? paths[0] : undefined;

	const { isDuotone } = host;
	host[Internal$2.NEEDS_REDRAW] = host => isDuotone !== host.isDuotone || host.transform || host.mask;
}

function updateShapes(host) {
	const { resolvedIcon } = host;
	if (!resolvedIcon) { return; }
	host[Internal$2.SVG].setAttribute('viewBox', `0 0 ${resolvedIcon.icon[0]} ${resolvedIcon.icon[1]}`);
	const updatePaths = isDuotone(host) ? updateDuotonePath : updateMonotonePath;
	updatePaths(host, { vectorDefinition: resolvedIcon.icon[4] });
}

function updateMonotonePath(host, { vectorDefinition }) {
	host[Internal$2.PATH_PRIMARY].setAttribute('d', vectorDefinition);
}

function updateDuotonePath(host, { vectorDefinition }) {
	host[Internal$2.PATH_PRIMARY].setAttribute('d', vectorDefinition[0]);
	host[Internal$2.PATH_SECONDARY].setAttribute('d', vectorDefinition[1]);
}

function resolveTransform({ _parseTransform, transform }) {
	const needsParsing = transform && typeof transform === 'string';
	const value = needsParsing ? _parseTransform(transform) : transform;
	return value ? value : undefined;
}

const applyStyle$1 = applyStyleWith({ css: /* css */`
	:host {
		box-sizing: border-box;
		display: inline-block;
		line-height: 1; }

		:host([pull="left"]) {
			float: left;
			margin-right: .3em; }

		:host([pull="right"]) {
			float: right;
			margin-left: .3em; }

	::slotted(*) {
		bottom: 0;
		left: 0;
		margin: auto;
		position: absolute;
		right: 0;
		top: 0; }
` });

const template$1 = document.createElement('template');
template$1.innerHTML = /* html */`
<span class="fa-layers">
	<slot></slot>
</span>
`;

const Internal$1 = {
	LAYERS: Symbol('layers'),
};

const updateLayersClass = updateElementClass(Internal$1.LAYERS);
const prefixLayersClass = prefix => updateLayersClass(value => prefix.concat(value));

const Props$1 = {
	size: { ...Props$2.size, observe: prefixLayersClass('fa-') },
	fixedWidth: { ...Props$2.fixedWidth, observe: updateLayersClass('fa-fw') },
	pull: Props$2.pull,
};

class FontAwesomeLayers extends HTMLElement {
	constructor() {
		super();
		const shadowRoot = this.attachShadow({ mode: 'open' });
		shadowRoot.appendChild(template$1.content.cloneNode(true));
		applyStyle$1(this);
		this[Internal$1.LAYERS] = shadowRoot.querySelector('.fa-layers');
	}
}
definePropsOn(FontAwesomeLayers, Props$1);

const applyStyle = applyStyleWith({ css: /* css */`
:host {
	box-sizing: border-box;
	display: inline-block;
	line-height: 1; }

.fa-layers-counter {
	background: var(--fa-layers-counter-background, #ff253a); }
` });

const template = document.createElement('template');
template.innerHTML = /* html */`
<span class="fa-layers-text"></span>
`;

function toHtmlFallback(text = '') {
	const span = document.createElement('span');
	span.className = 'fa-layers-text';
	span.textContent = text;
	return [span.outerHTML];
}

const Internal = {
	CONTAINER: Symbol('container'),
	NEEDS_REDRAW: Symbol('needs-complete-redraw-of-structure'),
};

const updateContainerClass = updateElementClass(Internal.CONTAINER);
const prefixContainerClass = prefix => updateContainerClass(value => prefix.concat(value));

const Props = {
	value: StringProp({ attribute: 'value', observe: updateContainer }),
	transform: { ...Props$2.transform, observe: updateContainer },
	parsedTransform: Props$2.parsedTransform,

	size: StringProp({ attribute: 'size', observe: prefixContainerClass('fa-') }),
	position: StringProp({ attribute: 'position', observe: prefixContainerClass('fa-layers-') }),

	fixedWidth: BooleanProp({ attribute: 'fixed-width', observe: updateContainerClass('fa-fw') }),
	inverse: BooleanProp({ attribute: 'inverse', observe: updateContainerClass('fa-inverse') }),
	counter: BooleanProp({ attribute: 'counter', observe: updateContainer }),
};

class FontAwesomeLayersText extends HTMLElement {
	constructor() {
		super();
		const shadowRoot = this.attachShadow({ mode: 'open' });
		shadowRoot.appendChild(template.content.cloneNode(true));
		applyStyle(this);
		this[Internal.CONTAINER] = shadowRoot.querySelector('.fa-layers-text');
		this[Internal.NEEDS_REDRAW] = host => host.transform;
		this._toHtml = textToHtml;
		this._parseTransform = parseTransform;
	}
}
definePropsOn(FontAwesomeLayersText, Props);

function updateContainer(host) {
	if (host[Internal.NEEDS_REDRAW](host)) {
		redrawElements(host);
	}
	updateLayerClass(host);
	updateTextValue(host);
}

function redrawElements(host) {
	const classes = host[Internal.CONTAINER].classList;
	host[Internal.CONTAINER].remove();

	const options = {
		transform: host.parsedTransform,
	};
	const [container] = host._toHtml(String(host.value), options) || toHtmlFallback(host.value);
	host.shadowRoot.innerHTML = host.shadowRoot.innerHTML.concat(container);
	host[Internal.CONTAINER] = host.shadowRoot.querySelector('.fa-layers-text');
	host[Internal.CONTAINER].classList.add(...classes);

	const { transform } = host;
	host[Internal.NEEDS_REDRAW] = host => transform !== host.transform;
}

function updateLayerClass(host) {
	const classList = host[Internal.CONTAINER].classList;
	const layerClass = host.counter ? 'fa-layers-counter' : 'fa-layers-text';
	if (classList.contains(layerClass)) { return; }
	host[Internal.CONTAINER].classList.remove('fa-layers-counter', 'fa-layers-text');
	host[Internal.CONTAINER].classList.add(layerClass);
}

function updateTextValue(host, value = host.value) {
	const text = host.counter && !value ? 0 : value;
	host[Internal.CONTAINER].textContent = text;
}

/* istanbul ignore next */
use(window.FontAwesome || {});

export { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText, use };