refactor

eds/blocks/columns/columns.css

@@ -52,24 +52,14 @@
 }
 
 .columns .play-button {
-  align-items: center;
-  background-color: var(--calcite-ui-foreground-2);
-  block-size: 50px;
-  border-radius: 50px;
-  color: var(--calcite-ui-text-1);
   display: flex;
-  inline-size: 50px;
+  align-items: center;
   inset-block-start: calc(50% - 25px);
   inset-inline-end: calc(50% - 25px);
   justify-content: center;
   position: absolute;
 }
 
-.columns .play-button:is(:hover,:focus) {
-  background-color: var(--calcite-ui-foreground-1);
-  color: var(--calcite-ui-text-1);
-}
-
 .columns .video-link {
   display: flex;
   position: relative;

eds/blocks/columns/columns.js

@@ -63,18 +63,18 @@ export default function decorate(block) {
       if (vidURL) {
         vidURL.innerHTML = '';
         vidURL.appendChild(picture);
-        const playButton = document.createElement('div');
-        playButton.classList.add('play-button');
-        playButton.setAttribute('aria-label', 'play video');
-        playButton.setAttribute('tabindex', '0');
-        playButton.setAttribute('aria-hidden', 'false');
-        const calciteIcon = document.createElement('calcite-icon');
-        calciteIcon.setAttribute('scale', 's');
-        calciteIcon.setAttribute('appearance', 'solid');
-        calciteIcon.setAttribute('icon', 'play-f');
-        calciteIcon.setAttribute('aria-hidden', 'true');
-        calciteIcon.setAttribute('calcite-hydrated', '');
-        playButton.appendChild(calciteIcon);
+        const playButton = calciteButton({
+          class: 'play-button',
+          'icon-start': 'play-f',
+          label: 'play video',
+          'aria-hidden': 'false',
+          'aria-label': 'play video',
+          appearance: 'solid',
+          kind: 'inverse',
+          scale: 'l',
+          round: '',
+        });
+
         vidURL.appendChild(playButton);
       }
     });