@forward "spacing-mixins";
@forward "helper-mixins";


@mixin cosmic-border() {
  border: 1px solid transparent;

  &:before {
    content: '';
    z-index: -1;
    position: absolute;
    top: -2px;
    left: -2px;
    height: calc(100% + 4px);
    width: calc(100% + 4px);
    filter: blur(var(--zn-blur, 1px));
    opacity: 0.9;
    border-radius: var(--zn-border-radius-large);

    background-image: conic-gradient(
        from var(--rotate) at 50% 50%,
        #71d9ff 0%,
        #a100ffff 22%,
        #71d9ff 44%,
        #ff00ceff 74%,
        #71d9ff 94%
    );

    animation: rotate-gradient 6s linear infinite;
  }
}