/* SVG Data URI & Border Image (with SVG Drop Shadow) */
@mixin pinked-border(
  $size            : 2,
  $color           : black,
  $dropshadow-x    : 0,
  $dropshadow-y    : 0,
  $dropshadow-blur : 0
){
  $svg-box-width:  $size * 4;
  $svg-box-height: $svg-box-width;
  $svg-obj-width:  $size * 4;
  $svg-obj-height: $svg-obj-width;

  $svg-dropshadow: '';

  $svg-filter: '';
  @if $dropshadow-x != 0 or $dropshadow-y != 0 or $dropshadow-blur != 0 {
    $svg-dropshadow-width:  ($dropshadow-x + $dropshadow-blur)*2;
    $svg-dropshadow-height: ($dropshadow-y + $dropshadow-blur)*2;
    $svg-box-width:  $svg-box-width + $svg-dropshadow-width;
    $svg-box-height: $svg-box-height + $svg-dropshadow-height;
    $svg-dropshadow: '<filter id="dropshadow" height="150%" width="150%"><feGaussianBlur in="SourceAlpha" stdDeviation="#{$dropshadow-blur}"/><feOffset dx="#{$dropshadow-x}" dy="#{$dropshadow-y}" result="offsetblur"/><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter>';
    $svg-filter: 'filter="url(%23dropshadow)"';
  }

  $svg-box-midpoint-x: $svg-box-width/2;
  $svg-box-midpoint-y: $svg-box-height/2;

  border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="#{$svg-box-width}" height="#{$svg-box-height}" viewBox="0,0 #{$svg-box-width},#{$svg-box-height}">#{$svg-dropshadow}<polygon fill="#{$color}" #{$svg-filter} points="#{$svg-box-midpoint-x},#{$svg-box-midpoint-y - ($svg-obj-height/2)} #{$svg-box-midpoint-x - ($svg-obj-width/2)},#{$svg-box-midpoint-y} #{$svg-box-midpoint-x},#{$svg-box-midpoint-y + ($svg-obj-height/2)} #{$svg-box-midpoint-x + ($svg-obj-width/2)},#{$svg-box-midpoint-y}"/></svg>') #{(($svg-box-height/4)+(($dropshadow-y + $dropshadow-blur)/2))/$svg-box-height*100%} #{(($svg-box-width/4)+(($dropshadow-x + $dropshadow-blur)/2))/$svg-box-width*100%} repeat;
  border-width: 0 0 #{round(($svg-box-height/4)+(($dropshadow-y + $dropshadow-blur)/2))}px;
  border-style: solid;
  background-clip: padding-box;
  margin-bottom: -#{round(($svg-box-height/4)+(($dropshadow-y + $dropshadow-blur)/2))}px;
}

@mixin lg-pinked-border(
  $size  : 2,
  $color : black
){
  position: relative;
  box-sizing: border-box;
  background-clip: padding-box;
  border-bottom: #{$size}px solid transparent;
  margin-bottom: -#{$size}px;
  &:after {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: #{$size}px;
    bottom: -#{$size}px;
    left: 0;
    color: $color;
    background-image:
      linear-gradient(45deg, rgba(0,0,0,0) 33.333%,  33.333%, currentColor 66.667%, rgba(0,0,0,0) 66.667%),
      linear-gradient(-45deg, rgba(0,0,0,0) 33.333%,  33.333%, currentColor 66.667%, rgba(0,0,0,0) 66.667%);
    background-size: #{$size*2}px #{$size*4}px;
    background-position: 50% -#{$size*3}px;
    background-repeat: repeat-x;
    z-index: 1;
  }
}


/* SVG Data URI & Border Image */
.svg-ds {
  position: relative;
  z-index: 2;
  background-color: teal;
  @include pinked-border(15, teal, 0, 1, 2);
}
        
/* Liner Gradients & Pseudo Element */
.pseudo {
  position: relative;
  z-index: 1;
  @include lg-pinked-border(15, #ad424e);
  filter: drop-shadow(hsla(0, 0%, 0%, 0.75) 0px 1px 2px);
  background-color: #ad424e;
}

/* SVG Data URI & Border Image */
.css-ds {
  background-color: orange;
  border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="10" viewBox="0 0 2 1" preserveAspectRatio="none" fill="orange"><polygon points="2 0 0 0 1 1"/></svg>') 0 0 100% repeat;
  border-width: 0 0 15px;
  border-style: solid;
  background-clip: padding-box;
  margin-bottom: -10px;
  filter: drop-shadow(hsla(0, 0%, 0%, 0.75) 0px 1px 2px);
}


/*******************
  Unrelated Styles
********************/
body {
  background: #ccc;
/*   display: table; */
  height: 100%;
  width: 100%;
  padding-bottom: 50px;
}

body > div {
  text-align: center;
  box-sizing: border-box;
  color: white;
  font: bold 0.75em/1.3 sans-serif;
  padding: 2em;
  transform: translatez(0);
  & + div {
    padding-top: calc(2em + 15px);
  }
}

h1, p {
  margin: 0;
  white-space: pre-line;
}

html { height: 100%; }