@import '../../partials/variables';

.scroll-to-top {
  display: flex;
  gap: 10px;

  position: fixed;
  right: 15%;
  bottom: 0;

  margin: 0 0 20px 0;

  @media (max-width: $mobile-breakpoint) {
    display: none;
  }

  &:hover {
    cursor: pointer;
  }

  &__icon {
    font-style: initial;
    padding: 10px;

    background-color: var(--background-color-secondary);

    &--top:before {
      @include font-awesome;

      content: "\f062";
    }

    &--bottom:before {
      @include font-awesome;

      content: "\f063";
    }
  }
}
