.arrow-box {
  position: relative;
  background: $gray-light;
  border: 1px solid $black;

  &:after,
  &:before {
    content: ' ';
    position: absolute;
    left: 80%;
    bottom: 100%;
    border: solid transparent;
    height: 0;
    width: 0;
    pointer-events: none;
  }

  &:after {
    border-color: transparent;
    border-bottom-color: $gray-light;
    border-width: 10px;
    margin-left: -10px;
  }

  &:before {
    border-color: transparent;
    border-bottom-color: $gray-medium;
    border-width: 11px;
    margin-left: -11px;
  }

  &.arrow-fill-white:after {
    border-bottom-color: $white;
  }
}