.border-c-box {
  --border-angle: 0deg;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 2px 4px hsl(0 0% 0% / 25%);
  animation: border-angle-rotate 2s infinite linear;
  border: 0.1rem solid transparent;
  position: relative;

  &.a {
    background: linear-gradient(white, white) padding-box,
      conic-gradient(
          from var(--border-angle),
          oklch(100% 100% 0deg),
          oklch(100% 100% 45deg),
          oklch(100% 100% 90deg),
          oklch(100% 100% 135deg),
          oklch(100% 100% 180deg),
          oklch(100% 100% 225deg),
          oklch(100% 100% 270deg),
          oklch(100% 100% 315deg),
          oklch(100% 100% 360deg)
        )
        border-box;
  }

  &.b {
    background: linear-gradient(white, white) padding-box,
      conic-gradient(
          from var(--border-angle),
          white,
        #c874b2 
        )
        border-box;
  }

  &.c {
    border-radius: 100%;
    background: radial-gradient(circle, var(--bg) 60%, transparent 60%);

    &:before,
    &:after {
      content: "";
      display: block;
      position: absolute;
      inset: 4px;
      border-radius: 100%;
      animation: border-angle-rotate 4s infinite linear;
      z-index: -1;
    }

    &:before {
      inset: 0;
      background: repeating-conic-gradient(
          from var(--border-angle),
          var(--bg),
          var(--bg) 30deg,
          oklch(100% 50% 190deg) calc(360deg / 6)
        )
        border-box;
    }

    &:after {
      background: repeating-conic-gradient(
          from calc(var(--border-angle) * -1),
          oklch(100% 40% 50deg),
          black 60deg
        )
        border-box;
    }
  }
}

@keyframes border-angle-rotate {
  from { --border-angle: 0deg; }
  to { --border-angle: 360deg; }
}


/** boilerplate **/
/* body {
  --bg: hsl(190deg 20% 10%);
  background: var(--bg);
  font-size: 32px;
  display: flex;
  place-content: center;
  gap: 8rem;
  min-height: 100svh;
  flex-wrap: wrap;
} */

@property --border-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

$anime-time: 8s;

$box-size: 200px;
$clip-distance: .05;
$clip-size: $box-size * (1 + $clip-distance * 2);
$path-width: 2px;

$main-color: #69ca62;

$codepen-logo-path: url('//blog.codepen.io/wp-content/uploads/2012/06/Button-White-Large.png');

%full-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.bb {
  @extend %full-fill;
  width: $box-size;
  height: $box-size;
  margin: auto;
  background: $codepen-logo-path no-repeat 50% / 70% rgba(#000, .1);
  color: $main-color;
  box-shadow: inset 0 0 0 1px rgba($main-color, .5);

  &::before,
  &::after {
    @extend %full-fill;
    content: '';
    z-index: -1;
    margin: -1 * $clip-distance * 100%;
    box-shadow: inset 0 0 0 $path-width; 
    animation: clipMe $anime-time linear infinite;
  }

  &::before {
    animation-delay: $anime-time * -.5;
  }

  // for debug
  &:hover {
    &::after,
    &::before {
      background-color: rgba(#f00, .3);
    }
  }

}

@keyframes clipMe {
  0%, 100% {clip: rect(0px, $clip-size, $path-width, 0px); }
  25% {clip: rect(0px, $path-width, $clip-size, 0px); }
  50% {clip: rect($clip-size - $path-width, $clip-size, $clip-size, 0px); }
  75% {clip: rect(0px, $clip-size, $clip-size, $clip-size - $path-width); }
}

/////

html,
body {
  height: 100%;
}

body {
  position: relative;
  background-color: #0f222b;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}