[data-wfa-component] a {
  color: var(--wfa-anchor-text-color, inherit);
  text-decoration: var(--wfa-anchor-text-decoration, underline);
}

[data-wfa-component] a:hover {
  --wfa-anchor-text-decoration: none;
}

/* inert attr support */

[inert] {
  pointer-events: none;
  cursor: default;
}

[inert],
[inert] * {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

/* Component: Custom spinner-icon */
.wfa-icon-custom__circular-spinner-animated {
  animation: 2s linear infinite svg-animation;
  max-width: 100px;
}

@keyframes svg-animation {
  0% {
    transform: rotateZ(0deg);
  }

  100% {
    transform: rotateZ(360deg);
  }
}

.wfa-icon-custom__circular-spinner-animated circle {
  animation: 1.4s ease-in-out infinite both circle-animation;
  display: block;
  fill: transparent;
  stroke: blue;
  stroke-linecap: round;
  stroke-dasharray: 67.92;
  stroke-dashoffset: 67.2;
  stroke-width: 2;
  transform-origin: 50% 50%;
}

@keyframes circle-animation {
  0%,
  25% {
    stroke-dashoffset: 67.2;
    transform: rotate(0);
  }

  50%,
  75% {
    stroke-dashoffset: 18;
    transform: rotate(45deg);
  }

  100% {
    stroke-dashoffset: 67.2;
    transform: rotate(360deg);
  }
}

/* Component: Alertbox */

.wfa-component-alertbox {
  font-size: var(--wfa-alertbox-font-size, 16px);
  padding: 15px 10px;
  border-radius: 5px;
  --wfa-alertbox-text-color: hsl(0deg 0% 26%);
  --wfa-alertbox-bg-color: hsl(0deg 0% 97%);
  color: var(--wfa-alertbox-text-color);
  background-color: var(--wfa-alertbox-bg-color);

  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wfa-component-alertbox p {
  color: inherit;
}

.wfa-component-alertbox a:not(.wfa-button) {
  color: var(--wfa-alertbox-text-color);
  text-decoration: underline;
}

.wfa-component-alertbox a:not(.wfa-button):hover {
  text-decoration: none;
}

.wfa-component-alertbox > * {
  margin-top: 0;
  margin-bottom: 0;
}

.wfa-component-alertbox[data-color-scheme="info"] {
  --wfa-alertbox-text-color: hsl(250, 35%, 27%);
  --wfa-alertbox-bg-color: hsl(240, 100%, 98%);
}

.wfa-component-alertbox[data-color-scheme="success"] {
  --wfa-alertbox-text-color: hsl(120deg 42% 18%);
  --wfa-alertbox-bg-color: hsl(120deg 52% 95%);
}

.wfa-component-alertbox[data-color-scheme="error"] {
  --wfa-alertbox-text-color: hsl(5deg 50% 25%);
  --wfa-alertbox-bg-color: hsl(0deg 100% 96%);
}
.wfa-component-alertbox[data-color-scheme="warning"] {
  --wfa-alertbox-text-color: #92400e;
  --wfa-alertbox-bg-color: #fffbeb;
}

/* End: Component: Alertbox */

/* Component: Button */

.wfa-button {
  border: 3px solid transparent;
  border-radius: 3px;
  box-shadow: var(--button-box-shadow, none);
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  padding: 0.5em 0.75em;
  margin: 0 0 0 0;
  vertical-align: middle;
  --button-text-color: #fff;
  --button-bg-color: #000;
  --button-border-color: #000;

  color: var(--button-text-color);
  background-color: var(--button-bg-color);
  border-color: var(--button-border-color);
  display: inline-block;
  text-align: center;
  transition: 0.15s all ease-in-out;
}

[data-wfa-component] a.wfa-button {
  --wfa-anchor-text-color: var(--button-text-color);
  --wfa-anchor-text-decoration: none;
}

.wfa-button:hover,
.wfa-button:focus-visible {
  color: var(--button-text-color);
  background-color: var(--button-bg-color);
  border-color: var(--button-border-color);
  --button-text-color: #000;
  --button-bg-color: #fff;
  --button-border-color: #000;
}

.wfa-button[data-color-scheme="info"] {
  --button-text-color: rgb(245, 245, 255);
  --button-bg-color: hsl(220deg 60% 15%);
  --button-border-color: hsl(220deg 60% 15%);
}

.wfa-button[data-color-scheme="info"]:hover {
  --button-text-color: rgb(240, 240, 250);
  --button-bg-color: hsl(220deg 60% 10%);
  --button-border-color: hsl(220deg 60% 10%);
}

.wfa-button[data-color-scheme="success"] {
  --button-text-color: #fff;
  --button-bg-color: #008000;
  --button-border-color: #008000;
}

.wfa-button[data-color-scheme="success"]:hover {
  --button-text-color: #008000;
  --button-bg-color: #fff;
  --button-border-color: #008000;
}

.wfa-button[data-color-scheme="warning"] {
  --button-text-color: #422006;
  --button-bg-color: #fde047;
  --button-border-color: #fde047;
}
.wfa-button[data-color-scheme="warning"]:hover {
  --button-text-color: #422006;
  --button-bg-color: #facc15;
  --button-border-color: #facc15;
}

.wfa-component-alertbox[data-color-scheme="warning"]
  .wfa-button[data-color-scheme="warning"] {
  --button-text-color: #fffbeb;
  --button-bg-color: #b45309;
  --button-border-color: #b45309;
}
.wfa-component-alertbox[data-color-scheme="warning"]
  .wfa-button[data-color-scheme="warning"]:hover {
  --button-bg-color: hsl(22.73deg 82.5% 31.37%);
  --button-border-color: hsl(22.73deg 82.5% 31.37%);
}

.wfa-button[data-color-scheme="error"] {
  --button-text-color: hsl(0 86% 98% / 1);
  --button-bg-color: #b91c1c;
  --button-border-color: #b91c1c;
}
.wfa-button[data-color-scheme="error"]:hover {
  --button-text-color: hsl(0 86% 98% / 1);
  --button-bg-color: #991b1b;
  --button-border-color: #991b1b;
}

/* End: Component: Button */

/* Component: Icon */

.wfa-icon {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
/* End: Component: Icon */