@import './mixins/mixins.scss';
@import './themes/vars.scss';

@include themes-mixin {
  @include b(back-top) {
    @include fade-in-transition(back-top);
    @include once {
      position: fixed;
      right: 40px;
      bottom: 40px;
      border-radius: 20px;
      width: 40px;
      height: 40px;
      overflow: hidden;
      transition: box-shadow .3s $default-cubic-bezier;
      cursor: pointer;
      svg {
        pointer-events: none;
      }
    }
    box-shadow: 0 2px 10px 0px rgba(238, 238, 238, .45);
    .n-back-top__button {
      transition: fill .3s $default-cubic-bezier;
      fill: $--back-top-button-fill;
    }
    &:hover {
      box-shadow: 0 2px 10px 0px rgb(77, 177, 153);
      .n-back-top__button {
        fill: $--back-top-button-fill-hover;
      }
    }
    &:active {
      box-shadow: 0 2px 10px 0px rgb(77, 177, 153);
      .n-back-top__button {
        fill: $--back-top-button-fill-hover;
      }
    }
  }
}