Braket Border SCSS Style

braket-border.scss

// for the headings in sidebars
$braket-border-opposites: (
    left: right,
    right: left,
    top: bottom,
    bottom: top
);
@mixin braket-border-child($direction, $border-width, $length) {
    content: "";
    border: $border-width solid black;
    position: absolute;

    $opposite: map-get($braket-border-opposites, $direction);
    border-#{$opposite}: none;
    #{$direction}: 0;

    $adjusted-cross-length: calc(100% - #{$border-width});
    @if $direction == left or $direction == right {
        width: $length;
        height: $adjusted-cross-length;
        top: 0;
    } @else if $direction == top or $direction == bottom {
        width: $adjusted-cross-length;
        height: $length;
        left: 0;
    } @else {
        @error "Unknown direction #{$direction}.";
    }
}
@mixin braket-border($border-width: 2px, $length: 10%, $axis: horizontal) {
    $first: "";
    @if $axis == horizontal {
        $first: left;
    } @else if $axis == vertical {
        $first: top;
    } @else {
        @error "Unknown axis #{$axis}.";
    }
    $second: map-get($braket-border-opposites, $first);

    position: relative;
    &:before {
        @include braket-border-child($first, $border-width, $length);
    }
    &:after {
        @include braket-border-child($second, $border-width, $length);
    }
}