.af-native-csvg-divider{position:relative;}

.af-native-csvg-divider.af-has-top::before,
.af-native-csvg-divider.af-has-bottom::after{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  line-height:0;
  overflow:hidden;
  pointer-events:none;
}

/* Defaults */
.af-native-csvg-divider{
  --af-top-w: var(--af-top-w-d, 100);
  --af-bot-w: var(--af-bot-w-d, 100);
  --af-top-h: var(--af-top-h-d, 90px);
  --af-bot-h: var(--af-bot-h-d, 90px);
}

@media (max-width:1024px){
  .af-native-csvg-divider{
    --af-top-w: var(--af-top-w-t, var(--af-top-w-d, 100));
    --af-bot-w: var(--af-bot-w-t, var(--af-bot-w-d, 100));
    --af-top-h: var(--af-top-h-t, var(--af-top-h-d, 90px));
    --af-bot-h: var(--af-bot-h-t, var(--af-bot-h-d, 90px));
  }
}

@media (max-width:767px){
  .af-native-csvg-divider{
    --af-top-w: var(--af-top-w-m, var(--af-top-w-t, var(--af-top-w-d, 100)));
    --af-bot-w: var(--af-bot-w-m, var(--af-bot-w-t, var(--af-bot-w-d, 100)));
    --af-top-h: var(--af-top-h-m, var(--af-top-h-t, var(--af-top-h-d, 90px)));
    --af-bot-h: var(--af-bot-h-m, var(--af-bot-h-t, var(--af-bot-h-d, 90px)));
  }
}

/* TOP */
.af-native-csvg-divider.af-has-top::before{
  top: calc(var(--af-top-off, -1px) + (var(--af-top-neg,0) * 1px));
  height: var(--af-top-h);
  z-index: calc(1 + (var(--af-top-over, 0) * 10));
  transform-origin:center;
  transform: scaleX(calc(var(--af-top-w) / 100)) scaleY(var(--af-top-sy, 1));
}

/* BOTTOM */
.af-native-csvg-divider.af-has-bottom::after{
  bottom: calc(var(--af-bot-off, -1px) + (var(--af-bot-neg,0) * 1px));
  height: var(--af-bot-h);
  z-index: calc(1 + (var(--af-bot-over, 0) * 10));
  transform-origin:center;
  transform: scaleX(calc(var(--af-bot-w) / 100)) scaleY(var(--af-bot-sy, 1));
}

/* Mask render so Color works */
.af-native-csvg-divider.af-has-top::before{
  background-color: var(--af-top-color, currentColor);
  -webkit-mask-image: var(--af-top-url);
  mask-image: var(--af-top-url);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.af-native-csvg-divider.af-has-bottom::after{
  background-color: var(--af-bot-color, currentColor);
  -webkit-mask-image: var(--af-bot-url);
  mask-image: var(--af-bot-url);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Fallback */
@supports not ((-webkit-mask-image: url("")) or (mask-image: url(""))){
  .af-native-csvg-divider.af-has-top::before{
    background: var(--af-top-url) center/100% 100% no-repeat;
  }
  .af-native-csvg-divider.af-has-bottom::after{
    background: var(--af-bot-url) center/100% 100% no-repeat;
  }
}