@mixin arrow-down($color, $inner-width: 6px, $outer-width: 10px) {
  &:before {
    border-right: solid $inner-width transparent;
    border-left: solid $inner-width transparent;
    border-top: solid $inner-width mat-color($mat-knoks-primary,50);
    transform: translateX(-50%);
    position: absolute;
    z-index: 1;
    content: '';
    top: 100%;
    left: 50%;
    height: 0;
    width: 0;
  }

  &:after {
    border-right: solid $outer-width transparent;
    border-left: solid $outer-width transparent;
    border-top: solid $outer-width mat-color($mat-knoks-accent,A200);
    transform: translateX(-50%);
    position: absolute;
    z-index: 0;
    content: '';
    top: 100%;
    left: 50%;
    height: 0;
    width: 0;
  }
}
