/* 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 smallSpin { /* stylelint-disable-line at-rule-prelude-no-invalid */
  0% {
    stroke-dasharray: 1 20.9911485751;
    transform: rotate(0deg);
  }
  7.5% {
    stroke-dasharray: 1 20.9911485751;
    transform: rotate(0deg);
  }
  20% {
    stroke-dasharray: 1 20.9911485751;
    transform: rotate(90deg);
  }
  30% {
    stroke-dasharray: 10.9955742876;
    transform: rotate(180deg);
  }
  40% {
    stroke-dasharray: 10.9955742876;
  }
  50% {
    stroke-dasharray: 1 20.9911485751;
    transform: rotate(450deg);
  }
  57.5% {
    stroke-dasharray: 1 20.9911485751;
    transform: rotate(450deg);
  }
  70% {
    stroke-dasharray: 10.9955742876;
    transform: rotate(540deg);
  }
  80% {
    stroke-dasharray: 10.9955742876;
    transform: rotate(630deg);
  }
  90% {
    stroke-dasharray: 10.9955742876;
  }
  100% {
    stroke-dasharray: 1 20.9911485751;
    transform: rotate(900deg);
  }
}
@keyframes largeThinSpin { /* stylelint-disable-line at-rule-prelude-no-invalid */
  0% {
    stroke-dasharray: 1 71.2566310326;
    transform: rotate(0deg);
  }
  7.5% {
    stroke-dasharray: 1 71.2566310326;
    transform: rotate(0deg);
  }
  20% {
    stroke-dasharray: 1 71.2566310326;
    transform: rotate(90deg);
  }
  30% {
    stroke-dasharray: 36.1283155163;
    transform: rotate(180deg);
  }
  40% {
    stroke-dasharray: 36.1283155163;
  }
  50% {
    stroke-dasharray: 1 71.2566310326;
    transform: rotate(450deg);
  }
  57.5% {
    stroke-dasharray: 1 71.2566310326;
    transform: rotate(450deg);
  }
  70% {
    stroke-dasharray: 36.1283155163;
    transform: rotate(540deg);
  }
  80% {
    stroke-dasharray: 36.1283155163;
    transform: rotate(630deg);
  }
  90% {
    stroke-dasharray: 36.1283155163;
  }
  100% {
    stroke-dasharray: 1 71.2566310326;
    transform: rotate(900deg);
  }
}
:host {
  display: inline-block;
}

div[role=progressbar] .gux-svg-container {
  display: block;
  inline-size: var(--gse-ui-progressAndLoading-spinner-large);
  block-size: var(--gse-ui-progressAndLoading-spinner-large);
}
div[role=progressbar] .gux-svg-container .gux-dynamic-circle,
div[role=progressbar] .gux-svg-container .gux-dynamic-circle-mask {
  fill: none;
  stroke: var(--gse-ui-progressAndLoading-spinner-foreground);
  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-dynamic-circle-mask {
  display: none;
  stroke: var(--gse-semantic-background-container-page-default);
  stroke-width: 2;
}
div[role=progressbar] .gux-svg-container .gux-static-circle {
  fill: none;
  stroke: var(--gse-ui-progressAndLoading-spinner-base);
  stroke-width: 4;
}
div[role=progressbar].gux-full-page .gux-svg-container .gux-dynamic-circle-mask {
  display: initial;
}
div[role=progressbar].gux-full-page .gux-svg-container .gux-static-circle {
  display: none;
}
div[role=progressbar].gux-input .gux-svg-container {
  inline-size: var(--gse-ui-progressAndLoading-spinner-small);
  block-size: var(--gse-ui-progressAndLoading-spinner-small);
}
div[role=progressbar].gux-input .gux-svg-container .gux-dynamic-circle {
  fill: none;
  stroke: var(--gse-ui-progressAndLoading-spinner-foreground);
  stroke-width: 2;
  transform-origin: 50% 50%;
  animation-name: smallSpin;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite, infinite;
}
div[role=progressbar].gux-input .gux-svg-container .gux-static-circle {
  stroke: var(--gse-ui-progressAndLoading-spinner-base);
  stroke-width: 2;
}