1@mixin css-arrow(
2  $vertical-direction,
3  $size,
4  $color,
5  $border-width,
6  $border-color,
7  $left: 50%,
8  $left-offset: 0px
9) {
10  & {
11    border: 1px solid $border-color;
12  }
13
14  &:after,
15  &:before {
16    @if ($vertical-direction == 'top') {
17      bottom: 100%;
18    } @else {
19      top: 100%;
20    }
21    border: solid transparent;
22    content: ' ';
23    height: 0;
24    width: 0;
25    position: absolute;
26    pointer-events: none;
27  }
28
29  &:after {
30    border-color: rgba($color, 0);
31    border-bottom-color: $color;
32    border-width: $size;
33    left: calc(#{$left} + #{$left-offset});
34    margin-left: -$size;
35  }
36  &:before {
37    border-color: rgba($border-color, 0);
38    border-bottom-color: $border-color;
39    border-width: $size + round(1.41421356 * $border-width);
40    left: calc(#{$left} + #{$left-offset});
41    margin-left: -($size + round(1.41421356 * $border-width));
42  }
43  &:before,
44  &:after {
45    @if ($vertical-direction == 'bottom') {
46      transform: rotate(180deg);
47    }
48  }
49
50  @at-root .ember-basic-dropdown-content--left#{&} {
51    &:after,
52    &:before {
53      left: auto;
54      right: calc(#{$left} + #{$left-offset} - #{$size});
55    }
56  }
57}
58
59@mixin css-top-arrow($size, $color, $border-width, $border-color, $left: 50%, $left-offset: 0px) {
60  @include css-arrow('top', $size, $color, $border-width, $border-color, $left, $left-offset);
61}
62@mixin css-bottom-arrow($size, $color, $border-width, $border-color, $left: 50%, $left-offset: 0px) {
63  @include css-arrow('bottom', $size, $color, $border-width, $border-color, $left, $left-offset);
64}
65
66@mixin vault-block {
67  &:not(:last-child) {
68    margin-bottom: (5/14) + 0rem;
69  }
70}
71