@import "../theme";

:host {
  display: inline-block;
}

.m-root {
  display: inline-block;
  line-height: 1;
  color: $mdc-theme-primary;
}
.m-static {
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
.m-indeterminate {
  animation: m-rotate 1.4s linear infinite;
}

.m-circle {
  stroke: currentColor;
}
.m-circleStatic {
  transition: stroke-dashoffset 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
.m-circleIndeterminate {
  animation: mui-progress-circular-dash 1.4s ease-in-out infinite;
  animation-name: m-keyframes-mui-progress-circular-dash;
  stroke-dasharray: 80px, 200px;
  stroke-dashoffset: 0px;
}
@-webkit-keyframes m-rotate {
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes m-keyframes-mui-progress-circular-dash {
  0% {
    stroke-dasharray: 1px, 200px;
    stroke-dashoffset: 0px;
  }
  50% {
    stroke-dasharray: 100px, 200px;
    stroke-dashoffset: -15px;
  }
  100% {
    stroke-dasharray: 100px, 200px;
    stroke-dashoffset: -125px;
  }
}
.m-circleDisableShrink {
  animation: none;
}