@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: map-get($--back-top-box-shadow, 'default');
    @include e(button) {
      transition: fill .3s $default-cubic-bezier;
      fill: $--back-top-button-fill;
    }
    &:hover {
      box-shadow: map-get($--back-top-box-shadow, 'hover');
      @include e(button) {
        fill: $--back-top-button-fill-hover;
      }
    }
    &:active {
      box-shadow: map-get($--back-top-box-shadow, 'active');
      @include e(button) {
        fill: $--back-top-button-fill-active;
      }
    }
  }
}