export default css => css`
*::before, *::after {
  display: inline-block;
  animation-play-state: paused;
  animation-fill-mode: forwards;
  animation-iteration-count: var(--icon-resolution, 1);
  vertical-align: text-top;
}
*::before {
  animation-name: var(--icon-name-start, var(--icon-name)),
                  var(--icon-size-start, var(--icon-size, icon-000));
  background-color: var(--icon-color-start, var(--icon-color));
}
*::after {
  animation-name: var(--icon-name-end, var(--icon-name)),
                  var(--icon-size-end, var(--icon-size, icon-000));
  background-color: var(--icon-color-end, var(--icon-color));
}

[style*='--icon-color-start']::before {
  color: var(--icon-color-start);
}
[style*='--icon-color-end']::after {
  color: var(--icon-color-end);
}
[style*='--icon-name-start']::before,
[style*='--icon-name-end']::after {
  content: '';
}

@keyframes icon-000 {
  100% {
    width: 1.2em;
    height: 1.2em;
  }
}
@keyframes icon-100 {
  100% {
    width: 0.625rem; /* 10px */
    height: 0.625rem; /* 10px */
  }
}
@keyframes icon-200 {
  100% {
    width: 0.75rem; /* 12px */
    height: 0.75rem; /* 12px */
  }
}
@keyframes icon-300 {
  100% {
    width: 1rem; /* 16px */
    height: 1rem; /* 16px */
  }
}
@keyframes icon-400 {
  100% {
    width: 1.125rem; /* 18px */
    height: 1.125rem; /* 18px */
  }
}
@keyframes icon-500 {
  100% {
    width: 1.250rem; /* 20px */
    height: 1.250rem; /* 20px */
  }
}
@keyframes icon-600 {
  100% {
    width: 1.375rem; /* 22px */
    height: 1.375rem; /* 22px */
  }
}
@keyframes icon-700 {
  100% {
    width: 1.500rem; /* 24px */
    height: 1.500rem; /* 24px */
  }
}
@keyframes icon-800 {
  100% {
    width: 1.625rem; /* 26px */
    height: 1.625rem; /* 26px */
  }
}
@keyframes icon-900 {
  100% {
    width: 1.750rem; /* 28px */
    height: 1.750rem; /* 28px */
  }
}
`;