.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;
}
}