.fai-squircle {
  --squircle-radius: auto;
  --squircle-smoothing: 1;
  --squircle-border-width: 0px;
  --squircle-border-color: transparent;
  --squircle-rendering: clip;
  --squircle-fallback-radius: 24px;
  --squircle-origin: 0;
  --corner-top-left: initial;
  --corner-top-right: initial;
  --corner-bottom-right: initial;
  --corner-bottom-left: initial;
  border: 0;
  border-radius: var(--squircle-fallback-radius);
  -webkit-clip-path: var(--squircle-path, inset(0 round var(--squircle-fallback-radius)));
  clip-path: var(--squircle-path, inset(0 round var(--squircle-fallback-radius)));
  overflow: hidden;
}

.fai-squircle.is-squircle-hydrated {
  border-radius: 0;
}

.fai-squircle.is-squircle-masked {
  -webkit-clip-path: none;
  clip-path: none;
  -webkit-mask-image: var(--squircle-mask);
  mask-image: var(--squircle-mask);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  mask-mode: alpha;
}

.fai-squircle.has-squircle-stroke-static {
  position: relative;
}

.fai-squircle > svg.fai-squircle-stroke {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  z-index: 2;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  pointer-events: none;
}

.fai-squircle[data-border="1"] {
  --squircle-border-width: 1px;
  --squircle-border-color: currentColor;
}