@use "../mixins/bem" as *;
@use "../mixins/function" as *;
@use "../mixins/config" as *;
@use "../var/size";
@use "../var/theme";
@use "../common/transition-fade";

@include b(rightBottomButton) {
  position: fixed;
  right: 2rem;
  bottom: 2.5rem;
  z-index: 99;
  gap: 1rem;

  @include e(button) {
    width: 2.2rem;
    height: 2.2rem;
    line-height: 2.4rem;
    border-radius: 50%;
    box-shadow: getCssVar("shadow-1");
    text-align: center;
    cursor: pointer;
    background: getCssVar("bg-color-1");

    &:hover {
      background: getCssVar("theme-color");
      box-shadow: getCssVar("shadow-2");
      .#{$namespace}-icon {
        color: #ffffff;
      }
    }

    /* 主题尺寸样式 */
    @include e(button__size) {
      position: absolute;
      bottom: 3.7rem;
      right: 1.7rem;
    }

    /* 主题风格样式 */
    @include e(button__mode) {
      position: absolute;
      bottom: 0.7rem;
      right: 1.7rem;

      @include e(button__mode__title) {
        padding: 0 10px;
        font-size: 12px;
        color: var(--el-color-info);
        cursor: default;
      }
    }

    .dropdown {
      padding: 6px 0 8px 0;
      background: getCssVar("bg-color-1");
      box-shadow: getCssVar("shadow-1");
      width: 110px;
      border-radius: 6px;
      line-height: 1.6rem;
      text-align: left;

      .dropdown-item {
        font-size: 14px;
        padding: 0 10px 0 15px;
        &:hover {
          background-color: getCssVar("item-bg-color-hover");
          color: getCssVar("theme-color");
        }
        &.active {
          background-color: getCssVar("theme-color");
          color: getCssVar("bg-color-1");
        }
      }
    }
  }

  @media (max-width: 719px) {
    right: 1rem;
    bottom: 1.5rem;
  }

  @media (max-width: 960px) {
    .size-change {
      display: none;
    }
  }
}