/* TODO: based on popover.css, combine them? */
/* TODO: other arrow directions */

.arrow-right {
  position: relative; /* TODO: should it be up to the consumer to set a non-static positioning? */
}

/* shared arrow styles */
.arrow-right:before,
.arrow-right:after {
  position: absolute;
  content: "";
  display: block;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* create a slightly larger arrow on the right for border purposes */
.arrow-right:before {
  right: -20px;
  border-left-color: var(--color-border);
}

/* create a smaller inset arrow on the right */
.arrow-right:after {
  right: -19px;
  border-left-color: var(--color-white);
}

/* move our arrows to the center */
.arrow-right:before,
.arrow-right:after {
  top: 50%;
  margin-top: -10px;
}