@use "./src/styles/colors";
@use "./src/styles/screen";

.scroll-up {
  display: none;

  &--visible {
    display: block;
    position: fixed;
    right: 30px;
    bottom: 80px;
    z-index: 2000;
  }

  &__button {
    position: static;
    margin: 0;

    width: 40px;
    height: 40px;

    background-color: colors.$extra-blue;
    background-image: url("~src/assets/img/arrow-up.svg");
    background-repeat: no-repeat;
    background-position: center center;

    border-radius: 50%;
    border: 1px solid colors.$blue-extra-light;
    box-sizing: border-box;
    cursor: pointer;
  }
}

#observer-target {
  position: absolute;

  @include screen.gt-mobile {
    top: -20px;

    width: 10px;
    height: 70px;
    
    visibility: hidden;
  }
}
