.arrow__circle {
  display: inline-block;
  width: rem(28);
  height: rem(28);
  border: rem(2) solid $primary-accent-color;
  border-radius: 50%;
  position: relative;
  transition: $transition-time;

  &:hover {
    background-color: $primary-accent-color;

    .arrow__pointer {

      &::after {
        border-color: $primary-bg-color;
      }
    }
  }
}

.arrow__pointer {
  cursor: pointer;

  &::after {
    display: block;
    content: "";
    width: rem(10);
    height: rem(10);
    border-top: rem(2) solid $primary-accent-color;
    border-right: rem(2) solid $primary-accent-color;
    transition: $transition-time all;
  }

  &--up {

    &::after {
      transform: rotate(-45deg);
    }
  }
}

.arrow__container {
  display: inline-block;
  position: relative;

  .arrow__pointer--up {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}