:host {
  display: inline-block;
  line-height: 0;
}

/* prettier-ignore */
@keyframes largeSpin { /* stylelint-disable-line at-rule-prelude-no-invalid */
  0% {
    stroke-dasharray: 1 68.115038379;
    transform: rotate(0deg);
  }
  7.5% {
    stroke-dasharray: 1 68.115038379;
    transform: rotate(0deg);
  }
  20% {
    stroke-dasharray: 1 68.115038379;
    transform: rotate(90deg);
  }
  30% {
    stroke-dasharray: 34.5575191895;
    transform: rotate(180deg);
  }
  40% {
    stroke-dasharray: 34.5575191895;
  }
  50% {
    stroke-dasharray: 1 68.115038379;
    transform: rotate(450deg);
  }
  57.5% {
    stroke-dasharray: 1 68.115038379;
    transform: rotate(450deg);
  }
  70% {
    stroke-dasharray: 34.5575191895;
    transform: rotate(540deg);
  }
  80% {
    stroke-dasharray: 34.5575191895;
    transform: rotate(630deg);
  }
  90% {
    stroke-dasharray: 34.5575191895;
  }
  100% {
    stroke-dasharray: 1 68.115038379;
    transform: rotate(900deg);
  }
}
@keyframes mediumSpin { /* stylelint-disable-line at-rule-prelude-no-invalid */
  0% {
    stroke-dasharray: 1 42.9822971503;
    transform: rotate(0deg);
  }
  7.5% {
    stroke-dasharray: 1 42.9822971503;
    transform: rotate(0deg);
  }
  20% {
    stroke-dasharray: 1 42.9822971503;
    transform: rotate(90deg);
  }
  30% {
    stroke-dasharray: 21.9911485751;
    transform: rotate(180deg);
  }
  40% {
    stroke-dasharray: 21.9911485751;
  }
  50% {
    stroke-dasharray: 1 42.9822971503;
    transform: rotate(450deg);
  }
  57.5% {
    stroke-dasharray: 1 42.9822971503;
    transform: rotate(450deg);
  }
  70% {
    stroke-dasharray: 21.9911485751;
    transform: rotate(540deg);
  }
  80% {
    stroke-dasharray: 21.9911485751;
    transform: rotate(630deg);
  }
  90% {
    stroke-dasharray: 21.9911485751;
  }
  100% {
    stroke-dasharray: 1 42.9822971503;
    transform: rotate(900deg);
  }
}
@keyframes smallSpin { /* stylelint-disable-line at-rule-prelude-no-invalid */
  0% {
    stroke-dasharray: 1 22.5619449019;
    transform: rotate(0deg);
  }
  7.5% {
    stroke-dasharray: 1 22.5619449019;
    transform: rotate(0deg);
  }
  20% {
    stroke-dasharray: 1 22.5619449019;
    transform: rotate(90deg);
  }
  30% {
    stroke-dasharray: 11.780972451;
    transform: rotate(180deg);
  }
  40% {
    stroke-dasharray: 11.780972451;
  }
  50% {
    stroke-dasharray: 1 22.5619449019;
    transform: rotate(450deg);
  }
  57.5% {
    stroke-dasharray: 1 22.5619449019;
    transform: rotate(450deg);
  }
  70% {
    stroke-dasharray: 11.780972451;
    transform: rotate(540deg);
  }
  80% {
    stroke-dasharray: 11.780972451;
    transform: rotate(630deg);
  }
  90% {
    stroke-dasharray: 11.780972451;
  }
  100% {
    stroke-dasharray: 1 22.5619449019;
    transform: rotate(900deg);
  }
}
div[role=progressbar] {
  position: relative;
  display: inline-block;
}
div[role=progressbar].gux-accent-ai {
  background: transparent;
}
div[role=progressbar].gux-accent-ai gux-icon {
  color: var(--gse-ui-progressAndLoading-aiSpinnerLoader-fullColor-icon-foregroundColor);
}
div[role=progressbar].gux-accent-ai .gux-svg-container .gux-static-circle {
  stroke: var(--gse-ui-progressAndLoading-aiSpinnerLoader-fullColor-base);
}
div[role=progressbar].gux-accent-primary {
  background: transparent;
}
div[role=progressbar].gux-accent-primary gux-icon {
  color: var(--gse-ui-progressAndLoading-aiSpinnerLoader-onPrimary-icon-foregroundColor);
}
div[role=progressbar].gux-accent-primary .gux-svg-container .gux-dynamic-circle {
  stroke: var(--gse-ui-progressAndLoading-aiSpinnerLoader-onPrimary-foreground);
}
div[role=progressbar].gux-accent-primary .gux-svg-container .gux-static-circle {
  stroke: var(--gse-ui-progressAndLoading-aiSpinnerLoader-onPrimary-base);
}
div[role=progressbar] {
  border-radius: 44px;
  /* ai spinner implementation inspired by https://css-tricks.com/building-progress-ring-quickly/ */
  --color-1: var(--gse-ui-progressAndLoading-aiSpinnerLoader-fullColor-foreground-1);
  --color-2: var(--gse-ui-progressAndLoading-aiSpinnerLoader-fullColor-foreground-2);
}
div[role=progressbar] gux-icon {
  position: absolute;
  inset-block-start: 25%;
  inset-inline-end: 25%;
  inline-size: var(--gse-ui-progressAndLoading-aiSpinnerLoader-icon-lg);
  block-size: var(--gse-ui-progressAndLoading-aiSpinnerLoader-icon-lg);
}
div[role=progressbar] .gux-svg-container {
  display: block;
  inline-size: var(--gse-ui-progressAndLoading-aiSpinnerLoader-lg);
  block-size: var(--gse-ui-progressAndLoading-aiSpinnerLoader-lg);
}
div[role=progressbar] .gux-svg-container .gux-dynamic-circle,
div[role=progressbar] .gux-svg-container .gux-dynamic-circle-mask {
  fill: none;
  stroke-width: 4;
  transform-origin: 50% 50%;
  animation-name: largeSpin;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite, infinite;
}
div[role=progressbar] .gux-svg-container .gux-static-circle {
  fill: none;
  stroke-width: 4;
}
div[role=progressbar].gux-size-medium gux-icon {
  inline-size: var(--gse-ui-progressAndLoading-aiSpinnerLoader-icon-md);
  block-size: var(--gse-ui-progressAndLoading-aiSpinnerLoader-icon-md);
}
div[role=progressbar].gux-size-medium .gux-svg-container {
  inline-size: var(--gse-ui-progressAndLoading-aiSpinnerLoader-md);
  block-size: var(--gse-ui-progressAndLoading-aiSpinnerLoader-md);
}
div[role=progressbar].gux-size-medium .gux-svg-container .gux-dynamic-circle {
  fill: none;
  stroke-width: 2;
  transform-origin: 50% 50%;
  animation-name: mediumSpin;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite, infinite;
}
div[role=progressbar].gux-size-medium .gux-svg-container .gux-static-circle {
  stroke-width: 2;
}
div[role=progressbar].gux-size-medium .gux-svg-container .gux-dynamic-circle-mask {
  display: none;
  stroke: var(--gse-ui-progressAndLoading-aiSpinnerLoader-fullColor-foreground-2);
  stroke-width: 1;
}
div[role=progressbar].gux-size-small gux-icon {
  inline-size: var(--gse-ui-progressAndLoading-aiSpinnerLoader-icon-sm);
  block-size: var(--gse-ui-progressAndLoading-aiSpinnerLoader-icon-sm);
}
div[role=progressbar].gux-size-small .gux-svg-container {
  inline-size: var(--gse-ui-progressAndLoading-aiSpinnerLoader-sm);
  block-size: var(--gse-ui-progressAndLoading-aiSpinnerLoader-sm);
}
div[role=progressbar].gux-size-small .gux-svg-container .gux-dynamic-circle {
  fill: none;
  stroke-width: 1;
  transform-origin: 50% 50%;
  animation-name: smallSpin;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite, infinite;
}
div[role=progressbar].gux-size-small .gux-svg-container .gux-static-circle {
  stroke-width: 1;
}
div[role=progressbar].gux-size-small .gux-svg-container .gux-dynamic-circle-mask {
  display: none;
  stroke: var(--gse-ui-progressAndLoading-aiSpinnerLoader-fullColor-foreground-2);
  stroke-width: 3;
}