﻿/* 容器设置 */
.floating-btn-container {
  z-index: 1001;
  position: fixed;
  bottom: 7%;
  right: 4%;
  /*display: flex;*/
  /*flex-direction: column;*/
  /*align-items: center;*/
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}







/* 激活器样式*/
.floating-btn {
  --btn-size: 48px;

  position: absolute;
  left: calc(var(--btn-size) / -2);
  bottom: calc(var(--btn-size) / -2);
  width: var(--btn-size);
  height: var(--btn-size);

  background-color: #007bff;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  font-size: 24px;
  -webkit-user-select: none;
  user-select: none;
  font-weight: bold;
  opacity: 0.3;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
  transition-property: opacity, box-shadow;

  &:hover {
    opacity: 1;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  }

  & div.far {
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
    transition-property: transform;
  }
}







/* 菜单列表样式 */
.floating-btns {
  position: absolute;
  display: flex;
  gap: 0.8em;
  font-size: 16px;
  opacity: 0;
  pointer-events: none;

  transition-duration: 0.3s;
  transition-timing-function: ease-out;
  transition-property: opacity, transform;

  align-items: center;
  justify-items: center;

  /* transform: rotate(-15deg); */

  /* 竖向 */
  &.direction-top,
  &.direction-bottom {
    flex-direction: column;
    left: -50%;
    width: 100%;

    & .btn::after {
      white-space: nowrap;
      right: 3.5em;
      padding: 3px 12px;
    }
  }

  &.direction-top {
    transform: translate(-024px, 036px);
    bottom: calc(50% + 0054px);
    transform-origin: bottom;
  }

  &.direction-bottom {
    transform: translate(024px, -036px);
    top: calc(50% + 0054px);
    transform-origin: top;
  }


  /* 水平 */
  &.direction-left,
  &.direction-right {
    flex-direction: row;
    height: 100%;
    top: 50%;

    & .btn::after {
      writing-mode: vertical-lr;
      white-space: nowrap;
      bottom: 3.5em;
      padding: 12px 3px;
    }
  }

  &.direction-left {
    transform: translate(036px, 024px);
    right: calc(50% + 0054px);
    transform-origin: right;
  }

  &.direction-right {
    transform: translate(-036px, -024px);
    left: calc(50% + 0054px);
    transform-origin: left;
  }

  /* 初始位置稍微偏下 */

  & .btn {
    --btn-size: 2.2em;
    width: var(--btn-size);
    height: var(--btn-size);
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
    transition-property: transform;
    background-color: white;
    color: inherit;
    &::before {
      content: "\f00c";
      color: #12aa9c;
      /* font-weight: bold; */
      font-family: "Font Awesome 5 Pro";
      position: absolute;
      font-size: 20px;
      opacity: 0;
      pointer-events: none;
      transition-duration: 0.3s;
      transition-timing-function: ease-out;
      transition-property: opacity, transform;
    }


    &.checked {
      transform: scale(1.5);
      z-index: 10;

      &::before {
        opacity: 1;
        transform: scale(1.3);
      }

      & .far {
        opacity: 0;
      }

      & .far::before {
        display: none;
      }
    }

    &::after {
      content: attr(title);
      background-color: rgba(255, 255, 255, 0.1);
      position: absolute;

      font-size: 0.7em;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
      opacity: 0;
      transition-duration: 0.3s;
      transition-timing-function: ease-out;
      transition-property: opacity;
    }

    & div.far {
      transition-duration: 0.8s;
      transition-timing-function: ease-out;
      transition-property: transform, opacity;
    }

    /* 悬停按钮的缩放效果 */
    &:hover {
      transform: scale(1.5);
      z-index: 10;

      &::after {
        opacity: 1;
      }

      & div.far {
        transform: rotate(360deg);
      }
    }
  }

}










/* 展开 */
.floating-btn-container.open {
  & .floating-btns {
    opacity: 1;
    pointer-events: all;
    transform: none;
  }

  & .floating-btn {
    opacity: 1;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);

    & div.far {
      /* 主按钮旋转成“X”样式 */
      transform: rotate(45deg);
    }
  }
}


/* 未实装 */
::deep [not-release].btn,
::deep [not-release] > .btn{
    pointer-events: none !important;
    background-color: rgba(99, 99, 99, .5) !important;
    color: grey !important;
    &::after {
    content: attr(title) " - 未实装" !important;
    opacity: 1 !important;
    color: rgba(255, 69, 0, 1) !important;
  }


  /* 解除注释 强制隐藏未实装功能 */
  /* display: none !important; */

}