<!-- Content -->
<h2>Material Button</h2>
<button class="mdc-button">Button</button>
<button class="mdc-button mdc-button--outlined">Button</button>
<button class="mdc-button mdc-button--unelevated">Button</button>
<button class="mdc-button mdc-button--raised">Button</button>

<h2>Angled Button Adjusted</h2>
<button class="angled no-fill mdc-button">Button</button>
<button class="angled outline mdc-button mdc-button--outlined">Button</button>
<button class="angled fill-flat mdc-button mdc-button--unelevated">Button</button>
<div class="shadow-container">
  <button class="angled fill-raised mdc-button mdc-button--raised">Button</button>
</div>

<div>
  <h3>Screenshot:</h3>
  <img style="width: 390px" src="https://i.imgur.com/u2OlSWm.png" alt="">
</div>

  <!-- Register Module -->
<script>
  if ('paintWorklet' in CSS) {
    CSS.paintWorklet.addModule('/una/pen/NZMXoZ.js');
  } else {
    console.log('No CSS Houdini Support')
  }
</script>

<!-- Include MDC Packages -->
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web/dist/material-components-web.min.js"></script>
<!-- MDC Ripple -->
<script>
  const buttons = document.querySelectorAll('.mdc-button');
    for (const button of buttons) {
        mdc.ripple.MDCRipple.attachTo(button);
    }
</script>

.angled {
  --corner-radius: 12px 0 0 0;
  --paint-color: #6200ee;
  --stroke-weight: 0;
  
  /* Mask every angled button with fill mode */
  -webkit-mask: paint(angled-corners, filled);
  
  /* Override theming on the button */
  border-radius: 0 !important;
}


.outline {
  --stroke-weight: 1;
  
  /* Outline On */
  border-image: paint(angled-corners, outlined) 0 fill !important;
}

.shadow-container {
  display: inline;
  filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.2));
  transition-property: filter;
}

.shadow-container:active, 
.shadow-container:focus {
  filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.45))
}


/* Etc */

h2, h3 {
  font-family: 'Roboto', sans-serif;
}

h3 {
  padding-top: 1rem;
  border-top: 1px dashed;
  color: dimgray;
}

if (typeof registerPaint !== 'undefined') {
  registerPaint('angled-corners', class {
    static get inputProperties() {
      return [
        '--corner-radius',
        '--stroke-weight',
        '--paint-color'
      ]
    }
    static get inputArguments() {
    return [
      '<custom-ident>',
      ]
    }
    paint(ctx, geom, properties, args) {
      
      let radii = properties.get('--corner-radius').toString().replace(/px/g, '').split(' ').slice(1)
      const inset = parseInt(properties.get('--stroke-weight')[0])/2 || 0
      const radius1 = radii[0]
      const radius2 = radii[1]
      const radius3 = radii[2]
      const radius4 = radii[3]

      const points = [
          {x: inset, y: radius1}, //x0,y0
          {x: radius1, y: inset}, //x1,y1
          {x: geom.width - radius2, y: inset}, //x2,y2
          {x: geom.width - inset, y: radius2}, //x3,y3
          {x: geom.width - inset, y: geom.height - radius3}, //x4,y4
          {x: geom.width - radius3, y: geom.height - inset}, //x5,y5
          {x: radius4, y: geom.height - inset}, //x6,y6
          {x: inset, y: geom.height - radius4}, //x7,y7
      ]

      ctx.fillStyle = properties.get('--paint-color')

      ctx.beginPath()
      ctx.moveTo(points[0].x, points[0].y) //x0,y0
      ctx.lineTo(points[1].x, points[1].y)
      ctx.lineTo(points[2].x, points[2].y)
      ctx.lineTo(points[3].x, points[3].y)
      ctx.lineTo(points[4].x, points[4].y)
      ctx.lineTo(points[5].x, points[5].y)
      ctx.lineTo(points[6].x, points[6].y)
      ctx.lineTo(points[7].x, points[7].y)
      ctx.closePath()
      ctx.lineTo(points[0].x, points[0].y)
      
      console.log(args, args.toString())

      if (args != 'filled') {
          ctx.strokeStyle = properties.get('--paint-color')
          ctx.lineWidth= properties.get('--stroke-weight')
          ctx.stroke()
      } else {
          ctx.fill()
      }
    }
  })
}