:host { box-sizing: border-box; }
:host *, :host ::before, :host ::after { box-sizing: inherit; }
[hidden] { display: none !important; }
:host { --primary-color: currentColor; --primary-opacity: 1; --secondary-color: currentColor; --secondary-opacity: 0.4; --rotate-angle: 0deg; box-sizing: content-box; display: inline-flex; align-items: center; justify-content: center; vertical-align: -0.125em; }
:host(:not([auto-width])) { width: 1.25em; height: 1em; }
:host([auto-width]) { width: auto; height: 1em; }
svg {
  height: 1em; overflow: visible; width: auto;
  & path[data-duotone-primary] { color: var(--primary-color); opacity: var(--path-opacity, var(--primary-opacity)); }
  & path[data-duotone-secondary] { color: var(--secondary-color); opacity: var(--path-opacity, var(--secondary-opacity)); }
}
:host([rotate]) { transform: rotate(var(--rotate-angle, 0deg)); }
:host([flip="x"]) { transform: scaleX(-1); }
:host([flip="y"]) { transform: scaleY(-1); }
:host([flip="both"]) { transform: scale(-1, -1); }
:host([rotate][flip="x"]) { transform: rotate(var(--rotate-angle, 0deg)) scaleX(-1); }
:host([rotate][flip="y"]) { transform: rotate(var(--rotate-angle, 0deg)) scaleY(-1); }
:host([rotate][flip="both"]) { transform: rotate(var(--rotate-angle, 0deg)) scale(-1, -1); }
:host([animation="beat"]) { animation-name: beat; animation-delay: var(--animation-delay, 0s); animation-direction: var(--animation-direction, normal); animation-duration: var(--animation-duration, 1s); animation-iteration-count: var(--animation-iteration-count, infinite); animation-timing-function: var(--animation-timing, ease-in-out); }
:host([animation="fade"]) { animation-name: fade; animation-delay: var(--animation-delay, 0s); animation-direction: var(--animation-direction, normal); animation-duration: var(--animation-duration, 1s); animation-iteration-count: var(--animation-iteration-count, infinite); animation-timing-function: var(--animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); }
:host([animation="beat-fade"]) { animation-name: beat-fade; animation-delay: var(--animation-delay, 0s); animation-direction: var(--animation-direction, normal); animation-duration: var(--animation-duration, 1s); animation-iteration-count: var(--animation-iteration-count, infinite); animation-timing-function: var(--animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); }
:host([animation="bounce"]) { animation-name: bounce; animation-delay: var(--animation-delay, 0s); animation-direction: var(--animation-direction, normal); animation-duration: var(--animation-duration, 1s); animation-iteration-count: var(--animation-iteration-count, infinite); animation-timing-function: var(--animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1)); }
:host([animation="flip"]) { animation-name: flip; animation-delay: var(--animation-delay, 0s); animation-direction: var(--animation-direction, normal); animation-duration: var(--animation-duration, 1s); animation-iteration-count: var(--animation-iteration-count, infinite); animation-timing-function: var(--animation-timing, ease-in-out); }
:host([animation="shake"]) { animation-name: shake; animation-delay: var(--animation-delay, 0s); animation-direction: var(--animation-direction, normal); animation-duration: var(--animation-duration, 1s); animation-iteration-count: var(--animation-iteration-count, infinite); animation-timing-function: var(--animation-timing, linear); }
:host([animation="spin"]) { animation-name: spin; animation-delay: var(--animation-delay, 0s); animation-direction: var(--animation-direction, normal); animation-duration: var(--animation-duration, 2s); animation-iteration-count: var(--animation-iteration-count, infinite); animation-timing-function: var(--animation-timing, linear); }
:host([animation="spin-pulse"]) { animation-name: spin-pulse; animation-direction: var(--animation-direction, normal); animation-duration: var(--animation-duration, 1s); animation-iteration-count: var(--animation-iteration-count, infinite); animation-timing-function: var(--animation-timing, steps(8)); }
:host([animation="spin-reverse"]) { animation-name: spin; animation-delay: var(--animation-delay, 0s); animation-direction: var(--animation-direction, reverse); animation-duration: var(--animation-duration, 2s); animation-iteration-count: var(--animation-iteration-count, infinite); animation-timing-function: var(--animation-timing, linear); }
@media (prefers-reduced-motion: reduce) {
  :host([animation="beat"]), :host([animation="bounce"]), :host([animation="fade"]), :host([animation="beat-fade"]), :host([animation="flip"]), :host([animation="shake"]), :host([animation="spin"]), :host([animation="spin-pulse"]), :host([animation="spin-reverse"]) { animation: auto ease 0s 1 normal none running none !important; transition: none !important; }
}
@keyframes beat { 
  0%, 90% { transform: scale(1); }
  45% { transform: scale(var(--beat-scale, 1.25)); }
}
@keyframes fade { 
  50% { opacity: var(--fade-opacity, 0.4); }
}
@keyframes beat-fade { 
  0%, 100% { opacity: var(--beat-fade-opacity, 0.4); transform: scale(1); }
  50% { opacity: 1; transform: scale(var(--beat-fade-scale, 1.125)); }
}
@keyframes bounce { 
  0% { transform: scale(1, 1) translateY(0px); }
  10% { transform: scale(var(--bounce-start-scale-x, 1.1), var(--bounce-start-scale-y, 0.9)) translateY(0); }
  30% { transform: scale(var(--bounce-jump-scale-x, 0.9), var(--bounce-jump-scale-y, 1.1))
        translateY(var(--bounce-height, -0.5em)); }
  50% { transform: scale(var(--bounce-land-scale-x, 1.05), var(--bounce-land-scale-y, 0.95)) translateY(0); }
  57% { transform: scale(1, 1) translateY(var(--bounce-rebound, -0.125em)); }
  64% { transform: scale(1, 1) translateY(0px); }
  100% { transform: scale(1, 1) translateY(0px); }
}
@keyframes flip { 
  50% { transform: rotate3d(var(--flip-x, 0), var(--flip-y, 1), var(--flip-z, 0), var(--flip-angle, -180deg)); }
}
@keyframes shake { 
  0% { transform: rotate(-15deg); }
  4% { transform: rotate(15deg); }
  8%, 24% { transform: rotate(-18deg); }
  12%, 28% { transform: rotate(18deg); }
  16% { transform: rotate(-22deg); }
  20% { transform: rotate(22deg); }
  32% { transform: rotate(-12deg); }
  36% { transform: rotate(12deg); }
  40%, 100% { transform: rotate(0deg); }
}
@keyframes spin { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes spin-pulse { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}