.conic {
  --border-width: 1px;
  --radius: 24px;
  position: relative;
  border-radius: var(--radius);
  border: var(--border-width) solid transparent;
}

.conic::before {
  content: " ";
  position: absolute;
  inset: calc(var(--border-width) * -1);
  z-index: -1;
  border: inherit;
  border-radius: inherit;
  background-image: conic-gradient(from var(--angle),
  rgba(24, 24, 27, 0.05) 80%,
  rgb(15 118 110) 88%,
  rgb(15 118 110) 92%,
  rgba(24, 24, 27, 0.05) 100%);
  background-origin: border-box;
  -webkit-mask: linear-gradient(black, black) content-box,
  linear-gradient(black, black);
  mask: linear-gradient(black, black), linear-gradient(black, black);
  -webkit-mask-clip: content-box, border-box;
  mask-clip: content-box, border-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: spin 3s linear infinite;
}

.dark .conic::before {
  background-image: conic-gradient(
    from var(--angle),
    rgb(255 255 255 / 0.1) 80%, 
    rgb(13 148 136) 88%, 
    rgb(13 148 136) 92%,
    rgb(255 255 255 / 0.1) 100%
  );
}

@property --angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

@keyframes spin {
  to {
  --angle: 1turn;
  }
}