@use '@style/theme/index.scss' as theme;
@use 'sass:string';
@use '@components/back-top/style/token.scss' as *;

$backtop-prefix-cls: string.unquote('#{theme.$prefix}-back-top');

.#{$backtop-prefix-cls} {
  position: fixed;
  right: $backtop-margin-right;
  bottom: $backtop-margin-bottom;
  z-index: 100;

  &-btn {
    width: $backtop-button-size-width;
    height: $backtop-button-size-width;
    color: $backtop-button-color-text;
    font-size: $backtop-button-size-font;
    text-align: center;
    background-color: $backtop-button-color-bg;
    border: none;
    border-radius: $backtop-button-border-radius;
    outline: none;
    cursor: pointer;
    transition: background-color theme.$transition-duration-2
      theme.$transition-timing-function-standard;

    &:hover {
      background-color: $backtop-button-color-bg_hover;
    }

    svg {
      font-size: $backtop-button-size-icon;
    }
  }
}