@import '../settings/variables';

.o-arrow-line {
  border-top: $hairline solid $color-separator;
  opacity: 0.5;
  position: relative;
  background-color: $color-background;

  &--alternate-background {
    background-color: $color-background-alternative;
  }

  &--invert-background {
    background-color: $color-inverted-background;
  }

  &:after {
    content: "";
    background-color: inherit;
    position: absolute;
    width: 9px;
    height: 9px;
    border-left: $hairline solid;
    border-top: $hairline solid;
    border-bottom: $hairline solid transparent;
    transform: rotate(225deg);
    left: 2em;
    bottom: -5px;
    color: $color-separator;
  }
}