svg.freesewing.draft {
  max-width: 100%;
  /* Reset */
  path,
  circle {
    fill: none;
    stroke: none;
  }

  /* Defaults */
  path,
  circle {
    stroke-opacity: 1;
    stroke-width: 0.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Stroke classes */
  .stroke-xs {
    stroke-width: 0.1;
  }
  .stroke-sm {
    stroke-width: 0.4;
  }
  .stroke-lg {
    stroke-width: 1.3;
  }
  .stroke-xl {
    stroke-width: 2;
  }
  .stroke-xxl {
    stroke-width: 4;
  }

  .sa {
    stroke-dasharray: 1, 3;
  }
  .help {
    stroke-width: 0.6;
    stroke-dasharray: 15, 5, 2, 5;
  }
  .dotted {
    stroke-dasharray: 0.5, 1;
  }
  .dashed {
    stroke-dasharray: 2, 2;
  }
  .lashed {
    stroke-dasharray: 8, 3;
  }
  .hidden {
    stroke: none !important;
    fill: none !important;
  }

  /* Text */
  text {
    font-size: 6px;
    @include title-font;
    text-anchor: start;
    font-weight: 400;
    dominant-baseline: ideographic;
  }
  .text-xs {
    font-size: 4px;
  }
  .text-sm {
    font-size: 5px;
  }
  .text-l {
    font-size: 8px;
  }
  .text-xl {
    font-size: 10px;
  }
  .text-xxl {
    font-size: 13px;
  }

  .center {
    text-anchor: middle;
  }
  .right {
    text-anchor: end;
  }

  .scribble {
    @include scribble-font;
  }

  /* Plugins */
  text.title-nr {
    font-size: 32px;
    @include title-font;
    font-weight: 700;
    stroke: none;
  }
  /* New style for sampled sizes */
  path.size-3XS,
  path.size-2XS,
  path.size-XS,
  path.size-S,
  path.size-M {
    stroke-width: 0.5;
    stroke-dasharray: 0.25 0.75;
  }
  path.made-to-measure,
  path.size-L,
  path.size-XL,
  path.size-2XL,
  path.size-3XL,
  path.size-4XL {
    stroke-width: 0.5;
  }
}

svg.freesewing.draft text {
  fill: currentColor;
}
.theme-wrapper.light svg.freesewing.draft {
  /* Stroke classes */
  path,
  circle {
    stroke: $fc-draft-fabric-light;
  }
  .fabric {
    stroke: $fc-draft-fabric-light;
  }
  .lining {
    stroke: $fc-draft-lining-light;
  }
  .interfacing {
    stroke: $fc-draft-interfacing-light;
  }
  .canvas {
    stroke: $fc-draft-canvas-light;
  }
  .various {
    stroke: $fc-draft-various-light;
  }
  .mark {
    stroke: $fc-draft-mark-light;
  }
  .contrast {
    stroke: $fc-draft-contrast-light;
  }
  .note {
    stroke: $fc-draft-note-light;
  }
  /* Fill classes */
  .fill-fabric {
    fill: $fc-draft-fabric-light;
  }
  .fill-lining {
    fill: $fc-draft-lining-light;
  }
  .fill-interfacing {
    fill: $fc-draft-interfacing-light;
  }
  .fill-canvas {
    fill: $fc-draft-canvas-light;
  }
  .fill-various {
    fill: $fc-draft-various-light;
  }
  .fill-mark {
    fill: $fc-draft-mark-light;
  }
  .fill-contrast {
    fill: $fc-draft-contrast-light;
  }
  .fill-note {
    fill: $fc-draft-note-light;
  }
  .fill-bg {
    fill: $fc-bg-light;
  }
  path.sample-focus {
    fill: #000;
  }
  /* scalebox plugin */
  path.scalebox.metric {
    stroke: none;
    fill: $fc-bg-light;
  }
  path.scalebox.imperial {
    stroke: none;
    fill: $fc-bg-dark;
  }
  path.bartack {
    stroke: $fc-draft-mark-light;
  }
  path.logo {
    fill: currentColor;
    stroke: none;
  }
  /* New style for sampled sizes */
  path.made-to-measure {
    stroke: #212529;
  }
  path.size-3XS {
    stroke: $oc-lime-6;
  }
  path.size-2XS {
    stroke: $oc-orange-6;
  }
  path.size-XS {
    stroke: $oc-grape-6;
  }
  path.size-S {
    stroke: $oc-indigo-6;
  }
  path.size-M {
    stroke: $oc-cyan-6;
  }
  path.size-L {
    stroke: $oc-indigo-6;
  }
  path.size-XL {
    stroke: $oc-grape-6;
  }
  path.size-2XL {
    stroke: $oc-orange-6;
  }
  path.size-3XL {
    stroke: $oc-lime-6;
  }
  path.size-4XL {
    stroke: $oc-teal-6;
  }
}
.theme-wrapper.dark svg.freesewing.draft {
  /* Stroke classes */
  path,
  circle {
    stroke: $fc-draft-fabric-dark;
  }
  .fabric {
    stroke: $fc-draft-fabric-dark;
  }
  .lining {
    stroke: $fc-draft-lining-dark;
  }
  .interfacing {
    stroke: $fc-draft-interfacing-dark;
  }
  .canvas {
    stroke: $fc-draft-canvas-dark;
  }
  .various {
    stroke: $fc-draft-various-dark;
  }
  .mark {
    stroke: $fc-draft-mark-dark;
  }
  .contrast {
    stroke: $fc-draft-contrast-dark;
  }
  .note {
    stroke: $fc-draft-note-dark;
  }
  /* Fill classes */
  .fill-fabric {
    fill: $fc-draft-fabric-dark;
  }
  .fill-lining {
    fill: $fc-draft-lining-dark;
  }
  .fill-interfacing {
    fill: $fc-draft-interfacing-dark;
  }
  .fill-canvas {
    fill: $fc-draft-canvas-dark;
  }
  .fill-various {
    fill: $fc-draft-various-dark;
  }
  .fill-mark {
    fill: $fc-draft-mark-dark;
  }
  .fill-contrast {
    fill: $fc-draft-contrast-dark;
  }
  .fill-note {
    fill: $fc-draft-note-dark;
  }
  .fill-bg {
    fill: $fc-bg-dark;
  }
  path.sample-focus {
    fill: #fff;
  }
  /* scalebox plugin */
  path.scalebox.metric {
    stroke: none;
    fill: $fc-bg-dark;
  }
  path.scalebox.imperial {
    stroke: none;
    fill: $fc-bg-light;
  }
  path.bartack {
    stroke: $fc-draft-mark-dark;
  }
  path.logo {
    fill: currentColor;
    stroke: none;
  }
  /* New style for sampled sizes */
  path.made-to-measure {
    stroke: #f8f9fa;
  }
  path.size-3XS {
    stroke: $oc-lime-3;
  }
  path.size-2XS {
    stroke: $oc-orange-3;
  }
  path.size-XS {
    stroke: $oc-grape-3;
  }
  path.size-S {
    stroke: $oc-indigo-3;
  }
  path.size-M {
    stroke: $oc-cyan-3;
  }
  path.size-L {
    stroke: $oc-indigo-3;
  }
  path.size-XL {
    stroke: $oc-grape-3;
  }
  path.size-2XL {
    stroke: $oc-orange-3;
  }
  path.size-3XL {
    stroke: $oc-lime-3;
  }
  path.size-4XL {
    stroke: $oc-teal-3;
  }
}

/* SVG defs (snippets) are in the shadow DOM */
g.snippet.notch > circle,
g.snippet.button > circle,
g.snippet.buttonhole > path {
  color: $fc-draft-mark-light;
}
g.snippet.bnotch > circle,
g.snippet.bnotch > path {
  color: $fc-draft-note-light;
}
/* Same for paperless grid, also in shadow DOM */
rect.grid {
  stroke-width: 1;
  stroke: currentColor;
}
path.gridline {
  stroke-linecap: butt;
  stroke-width: 0.3 !important;
  stroke-dasharray: none;
}
path.gridline.sm {
  stroke-width: 0.15 !important;
}
path.gridline.xs {
  stroke-width: 0.1 !important;
}
path.gridline.metric.sm {
  stroke-dasharray: 3 1;
}
path.gridline.metric.xs {
  stroke-dasharray: 1 1;
}
path.gridline.imperial {
  stroke-dasharray: 5 5;
}
path.gridline.imperial.sm {
  stroke-dasharray: 2 2;
}
.light {
  rect.grid,
  path.gridline {
    color: $oc-gray-5 !important;
  }
}
.dark {
  rect.grid,
  path.gridline {
    color: $oc-gray-6 !important;
  }
}