/* Cut (chamfered) corners, like the edge of a die: the shared helper for the tool pages. Nothing
   here rounds a corner. The size is --dm-cut (0.5rem until the token exists everywhere).
     .cut       a shape with cut corners; a border on it is clipped at the slants
     .cut-edge  a shape whose border follows the cut: --edge is the border colour, --fill the
                fill, --bw the border width. Put content in it normally (it keeps its own layer).
     .cut-frame with .cut: the edge is drawn ON TOP as an overlay (straight sides plus a stripe along
                each slant), for boxes whose content cannot sit above a ::before fill. --edge and
                --bw as above. The element must be positioned and must not scroll itself (the
                overlay would scroll with its content): let a child scroll instead.
   Never put a plain border, inset box-shadow or outline on a cut shape: the slants cut it off
   (the recurring "border problem"; e2e/cut-edges.spec.ts fails on it). A panel or box is better
   as tokens.css `.dm-cut` with its knobs; `.cut` alone is only for shapes without an outline.
   Clip-path also clips box-shadow and outlines outside the shape: give focus rings an
   outline-offset of 0 or negative, or draw them as part of the shape. */
.cut,
.cut-edge {
  --c: var(--dm-cut, 0.5rem);
  border-radius: 0;
  clip-path: polygon(
    var(--c) 0,
    calc(100% - var(--c)) 0,
    100% var(--c),
    100% calc(100% - var(--c)),
    calc(100% - var(--c)) 100%,
    var(--c) 100%,
    0 calc(100% - var(--c)),
    0 var(--c)
  );
}
.cut-edge {
  --bw: 2px;
  --edge: var(--dm-border-strong);
  --fill: transparent;
  /* an element that is both .cut-edge and in tokens.css's list (.btn, .card button...) is drawn
     by both mechanisms: feed the second one the same colours so they agree */
  --dm-edge: var(--edge);
  --dm-fill: var(--fill);
  position: relative;
  isolation: isolate;
  background: var(--edge);
  border: 0;
}
.cut-edge::before {
  content: '';
  position: absolute;
  inset: var(--bw);
  z-index: -1;
  background: var(--fill);
  --ci: max(0px, calc(var(--c) - var(--bw) * 0.586));
  clip-path: polygon(
    var(--ci) 0,
    calc(100% - var(--ci)) 0,
    100% var(--ci),
    100% calc(100% - var(--ci)),
    calc(100% - var(--ci)) 100%,
    var(--ci) 100%,
    0 calc(100% - var(--ci)),
    0 var(--ci)
  );
}
/* beat the plain button styles of the account pages (button.secondary, button.danger) */
button.cut-edge,
a.cut-edge {
  background: var(--edge);
  border: 0;
}

.cut-frame {
  --bw: 1px;
  --edge: var(--dm-border-strong);
}
.cut-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow: inset 0 0 0 var(--bw) var(--edge);
  background:
    linear-gradient(
        to bottom right,
        transparent 50%,
        var(--edge) 50%,
        var(--edge) calc(50% + var(--bw)),
        transparent calc(50% + var(--bw))
      )
      top left / var(--c) var(--c) no-repeat,
    linear-gradient(
        to bottom left,
        transparent 50%,
        var(--edge) 50%,
        var(--edge) calc(50% + var(--bw)),
        transparent calc(50% + var(--bw))
      )
      top right / var(--c) var(--c) no-repeat,
    linear-gradient(
        to top left,
        transparent 50%,
        var(--edge) 50%,
        var(--edge) calc(50% + var(--bw)),
        transparent calc(50% + var(--bw))
      )
      bottom right / var(--c) var(--c) no-repeat,
    linear-gradient(
        to top right,
        transparent 50%,
        var(--edge) 50%,
        var(--edge) calc(50% + var(--bw)),
        transparent calc(50% + var(--bw))
      )
      bottom left / var(--c) var(--c) no-repeat;
}