@import './token.less';

@float-button-prefix-cls: ~'@{prefix}-float-button';

.@{float-button-prefix-cls} {
  position: fixed;
  right: @float-button-margin-right;
  bottom: @float-button-margin-bottom;
  z-index: @float-button-z-index;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: @float-button-gap;

  &-vertical {
    flex-direction: column;
  }

  &-back-top {
    &-btn {
      width: @float-button-backtop-button-size-width;
      height: @float-button-backtop-button-size-width;
      color: @float-button-backtop-button-color-text;
      font-size: @float-button-backtop-button-size-font;
      text-align: center;
      background-color: @float-button-backtop-button-color-bg;
      border: none;
      border-radius: @float-button-backtop-button-border-radius;
      outline: none;
      cursor: pointer;
      transition: all @transition-duration-2 @transition-timing-function-linear;

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

      svg {
        font-size: @float-button-backtop-button-size-icon;
      }
    }
  }

  &-ai-assistant {
    width: @float-button-ai-assistant-width;
    height: @float-button-ai-assistant-height;
    flex-shrink: 0;
    border-radius: @float-button-ai-assistant-border-radius;
    background: linear-gradient(180deg, #c09ef8 -4.86%, #2f5af5 102.08%);
    box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: @float-button-ai-assistant-padding;
    box-sizing: border-box;
    cursor: pointer;

    &-text {
      display: flex;
      flex-direction: column;
      color: #fff;
      text-align: center;
      font-size: @float-button-ai-assistant-font-size;
      font-style: normal;
      font-weight: @float-button-ai-assistant-font-weight;
    }

    &-page,
    &-page-loading {
      width: @float-button-ai-assistant-page-width;
      height: @float-button-ai-assistant-page-height;
      border: 0;
      position: @float-button-ai-assistant-page-position;
      right: @float-button-margin-right;
      bottom: @float-button-margin-bottom;
      z-index: 999999998;
      background-image: linear-gradient(
        177deg,
        #eaf1ff -1.47%,
        #edf1ff 47.97%,
        #eaecff 97.41%
      );
      stroke-width: 2px;
      stroke: #fff;
      filter: drop-shadow(0px 2px 16px rgba(0, 0, 0, 0.12));
    }

    &-page-loading {
      z-index: 999999999;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      &-img {
        width: calc(@float-button-ai-assistant-page-width * 0.4);
      }

      &-text {
        font-size: @font-size-title-1;
        margin-top: @spacing-5;
        background: linear-gradient(90deg, #c09ef8 0%, #2f5af5 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
}