// Slash Logo

.slash-left {
  position: relative;

  &:before {
    content: "";
    background-color: $accent-color-1;
    width:3px;
    display: block;
    position: absolute;
    top:0;
    bottom: -1rem;
    left:0;
    transform: skewX(-16.5deg);
    transform-origin: bottom;
  }
}



// HTML/CSS  only Slanted Border

$prftangle: 90deg - 73.5deg;
$prftangle-negative: 73.5deg - 90deg;

@mixin slantmix ($lmargin, $rmargin, $slantht) {

  position: relative;
  display:block;
  z-index: 1;
  height: $slantht;
  min-width: tan($prftangle) + 1 / 3;
  overflow: wrap;
  display:inline-block;

  &.slantright {
    margin-right:tan($prftangle) + $rmargin;
    &:after {
      transform: skewX($prftangle-negative);
      transform-origin: 0% 100%;
      min-width:auto;
    }
  }

  &.slantleft {
    margin-left:tan($prftangle) + $lmargin;
    &:before {
      transform: skewX($prftangle-negative);
      transform-origin: 10% 0%;
      min-width:auto;
    }
  }
}

.slantleft:before,
.slantright:after {
  background: inherit;
  bottom: 0;
  top:0;
  content: '\00a0';
  display: block;
  position: absolute;
  right: 0;
  left:0;
  z-index: -1;
}

.slantleft:before {
  right: 50%;
}

.slantright:after {
  left: 50%;
}