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