:host {
  /*@doc Define a cor do spinner.*/
  --ez-spinner--color: var(--color--ocean-green-600, #008561);

  /*@doc Define o tamanho padrão do spinner.*/
  --ez-spinner--size-default: 24px;

  /*@doc Define o tamanho médio do spinner.*/
  --ez-spinner--size-medium: 32px;

  /*@doc Define o tamanho grande do spinner.*/
  --ez-spinner--size-large: 42px;

  /*@doc Define a duração da animação do spinner.*/
  --ez-spinner--animation-duration: 1.4s;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.spinner__container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.spinner__svg {
  color: var(--ez-spinner--color);
  width: var(--ez-spinner--size-default);
  height: var(--ez-spinner--size-default);
}

.spinner__container[data-size="medium"] .spinner__svg {
  width: var(--ez-spinner--size-medium);
  height: var(--ez-spinner--size-medium);
}

.spinner__container[data-size="large"] .spinner__svg {
  width: var(--ez-spinner--size-large);
  height: var(--ez-spinner--size-large);
}

.spinner__path {
  animation: spinner-dash var(--ez-spinner--animation-duration) ease-in-out infinite,
    spinner-rotate var(--ez-spinner--animation-duration) linear infinite;
  transform-origin: center;
  will-change: stroke-dasharray, stroke-dashoffset;
}

@keyframes spinner-rotate {
  0% {
    transform: rotate(0deg);
  }

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

@keyframes spinner-dash {
  0% {
    stroke-dasharray: 1, 63;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 32, 63;
    stroke-dashoffset: -16;
  }

  100% {
    stroke-dasharray: 1, 63;
    stroke-dashoffset: -63;
  }
}