Checkpoint

src/styles/_mixins.scss

@@ -0,0 +1,67 @@
+@use './variables' as vars;
+
+// Reusable chamfer/fillet container mixin used by cards, lists, forms, etc.
+@mixin cd-chamfered-container($fillet: vars.$cyberduck-border-fillet) {
+  --cd-list-fillet: var(--cyberduck-border-fillet, #{$fillet});
+
+  border: 1px solid var(--color-border-default);
+  border-radius: 0;
+  clip-path: polygon(
+    0 0,
+    calc(100% - var(--cd-list-fillet)) 0,
+    100% var(--cd-list-fillet),
+    100% 100%,
+    var(--cd-list-fillet) 100%,
+    0 calc(100% - var(--cd-list-fillet))
+  );
+  position: relative;
+  overflow: hidden;
+}
+
+// Mixin: add corner accent L-shape at top-left and bottom-right
+// Generalized name: cd-accent-container
+@mixin cd-accent-container(
+  $color,
+  $size: vars.$cyberduck-accent-size,
+  $length: vars.$cyberduck-accent-length
+) {
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: $length;
+    height: $length;
+    pointer-events: none;
+    background-image:
+      linear-gradient(to right, $color 0 $size, transparent $size),
+      linear-gradient(to bottom, $color 0 $size, transparent $size);
+    background-repeat: no-repeat;
+    background-position:
+      left top,
+      left top;
+    z-index: 1000;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: $length;
+    height: $length;
+    pointer-events: none;
+    background-image:
+      linear-gradient(to left, $color 0 $size, transparent $size),
+      linear-gradient(to top, $color 0 $size, transparent $size);
+    background-repeat: no-repeat;
+    background-position:
+      right bottom,
+      right bottom;
+    z-index: 1000;
+  }
+}
+
+