[class*="btn--"]:not(.btn--none, .wp-block-button),
.wp-block-button[class*="btn--"] > .wp-block-button__link,
.wp-block-button[class*="btn--"] > a {
  
  --btn-shape-cut: 25px;
  --btn-shape-cut-hover: 0px;
  --btn-shape-radius: var(--btn-radius);
  --btn-shape-duration: 320ms;
  --btn-shape-ease: cubic-bezier(.22, 1, .36, 1);

  
  --btn-shape-side-y-top: 46%;
  --btn-shape-side-y-bottom: 54%;

  
  padding-inline: calc(var(--btn-padding-inline) + var(--btn-shape-cut));

  
  will-change: clip-path, border-radius;
  transform: translateZ(0);
  backface-visibility: hidden;

  
  clip-path: polygon(
    var(--btn-shape-cut) 0%,
    calc(100% - var(--btn-shape-cut)) 0%,
    100% var(--btn-shape-side-y-top),
    100% var(--btn-shape-side-y-bottom),
    calc(100% - var(--btn-shape-cut)) 100%,
    var(--btn-shape-cut) 100%,
    0% var(--btn-shape-side-y-bottom),
    0% var(--btn-shape-side-y-top)
  );

  border-radius: var(--btn-shape-radius);

  
  transition:
    var(--btn-transition, var(--transition)),
    clip-path var(--btn-shape-duration) var(--btn-shape-ease),
    border-radius var(--btn-shape-duration) var(--btn-shape-ease),
    padding-inline var(--btn-shape-duration) var(--btn-shape-ease);
}

@media (hover: hover) and (pointer: fine) {
  [class*="btn--"]:not(.btn--none, .wp-block-button):hover,
  .wp-block-button[class*="btn--"] > .wp-block-button__link:hover,
  .wp-block-button[class*="btn--"] > a:hover {
    
    clip-path: polygon(
      var(--btn-shape-cut-hover) 0%,
      calc(100% - var(--btn-shape-cut-hover)) 0%,
      100% var(--btn-shape-side-y-top),
      100% var(--btn-shape-side-y-bottom),
      calc(100% - var(--btn-shape-cut-hover)) 100%,
      var(--btn-shape-cut-hover) 100%,
      0% var(--btn-shape-side-y-bottom),
      0% var(--btn-shape-side-y-top)
    );
  }
}


[class*="btn--"]:not(.btn--none, .wp-block-button):active,
.wp-block-button[class*="btn--"] > .wp-block-button__link:active,
.wp-block-button[class*="btn--"] > a:active {
  clip-path: polygon(
    2px 0%,
    calc(100% - 2px) 0%,
    100% var(--btn-shape-side-y-top),
    100% var(--btn-shape-side-y-bottom),
    calc(100% - 2px) 100%,
    2px 100%,
    0% var(--btn-shape-side-y-bottom),
    0% var(--btn-shape-side-y-top)
  );
}


@supports not (clip-path: polygon(0 0)) {
  [class*="btn--"]:not(.btn--none, .wp-block-button),
  .wp-block-button[class*="btn--"] > .wp-block-button__link,
  .wp-block-button[class*="btn--"] > a {
    clip-path: none;
  }
}