.ray-icon {
  position: relative;
  width: var(--ray-icon-width);
  height: var(--ray-icon-height);
  border: none;
  outline: none;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  fill: currentColor;
  transform: translateZ(0);
  opacity: var(--ray-icon-depth);
  cursor: var(--ray-icon-cursor);

  & svg[RayIconAttribute="ray-icon"] {
    width: var(--ray-icon-width);
    height: var(--ray-icon-height);
    fill: currentColor;
  }
}

.ray-icon-path__animate {
  stroke-dasharray: var(--ray-icon-path-length);
  stroke-dashoffset: var(--ray-icon-path-length);
  animation: rayIconPathAnimate 2s forwards;
}

@keyframes rayIconPathAnimate {
  to {
    stroke-dashoffset: 0;
  }
}