@import '../../../style/themes/index';
@import '../../../style/mixins/index';

@speed-dials-prefix-cls: ~'@{fc-prefix}-speed-dials';
/*Speed dials */
@speed-dials-font-weight: 400;
@speed-dials-border-width: @border-width-base;
@speed-dials-border-style: @border-style-base;
@speed-dials-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
@speed-dials-primary-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
@speed-dials-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);

@speed-dials-primary-color: @white;
@speed-dials-primary-bg: @primary-color;

@speed-dials-default-color: @white;
@speed-dials-default-bg: @white;
@speed-dials-default-border: @border-color-base;

@speed-dials-item-active-bg: @primary-6;

@speed-dials-padding-base: 0 @padding-md - 1px;
@speed-dials-font-size-lg: @font-size-base;
@speed-dials-font-size-sm: @font1;
@speed-dials-font-size-lg: @font5;
@speed-dials-padding-lg: 0 @padding-md - 1px;
@speed-dials-padding-sm: 0 @padding-xs - 1px;

@speed-dials-width-base: 72px;
@speed-dials-width-lg: 88px;
@speed-dials-width-sm: 64px;
@speed-dials-width-mini: 48px;

.@{speed-dials-prefix-cls} {
  position: fixed;
  display: flex;
  text-align: center;
  width: @speed-dials-width-mini;
  margin: @speed-dials-width-mini * 0.25;
  font-size: @speed-dials-font-size-sm;
  font-weight: @speed-dials-font-weight;
  white-space: nowrap;
  word-break: keep-all;
  z-index: @zindex-speedDials;
  transition: all @animation-duration-base @ease-base-in;

  span.iconfont {
    font-size: @speed-dials-font-size-lg;
    line-height: 1.5;
    font-weight: @speed-dials-font-weight;
  }

  /**  标题常规 */
  .title-md {
    white-space: nowrap;
    word-break: keep-all;
    overflow: hidden;
    padding: 0 @padding-sm * 0.333 - 1px;
    text-overflow: clip;
    margin-top: -(@padding-sm * 0.25) - 1px;
  }

  /** 隐藏按钮 */
  .hide-btn {
    .title-md;
    transform: translate(@speed-dials-width-mini*0.4, -@speed-dials-width-mini*0.75);
    box-shadow: @speed-dials-shadow;
    color: @font-color-placeholder;
    position: absolute;
    right: calc(50% - 15px);
    top: calc(50% + 10px);
    span.iconfont {
      font-size: @speed-dials-font-size-sm*1.5;
    }

    &:hover {
      // color: @primary-color;
    }
  }

  &-trigger {
    width: @speed-dials-width-mini;
    height: @speed-dials-width-mini;
    border-radius: @speed-dials-width-mini;
    // border: @border-width-base @border-color-base @border-style-base;
    box-shadow: 0px 8px 22px -6px rgba(24, 39, 75, 0.12), 0px 14px 64px -4px rgba(24, 39, 75, 0.12);
    background-color: @white;
    padding: @padding-sm * 0.333 - 1px;
    // box-shadow: @speed-dials-shadow;
    cursor: pointer;
    position: relative;
    z-index: @zindex-speedDials;

    &-hover:hover {
      background-color: @blue-6;
      .iconfont {
        color: @white;
      }
    }

    &-icon {
      position: absolute;
      left: calc(50% - 10px);
      top: calc(50% - 15px);
    }

    &-title {
      .title-md;
    }

    &-hide {
      .hide-btn;

      &.placement-right {
        transform: translate(-@speed-dials-width-mini*0.4, -@speed-dials-width-mini*0.75);
        transition: all @animation-duration-slow @ease-base-in;
      }
      display: none;
      &-show {
        display: block;
      }
    }

    &-primary {
      // background-color: @primary-color;
      // box-shadow: @speed-dials-primary-shadow;
      box-shadow: 0px 8px 22px -6px rgba(24, 39, 75, 0.12),
        0px 14px 64px -4px rgba(24, 39, 75, 0.12);
      text-shadow: @speed-dials-text-shadow;
      // color: @speed-dials-primary-color;
      // border: @border-width-base color(~`colorPalette('@{primary-color}', 5) `) @border-style-base;

      // &:hover {
      //   text-shadow: @speed-dials-text-shadow;
      //   background-color: color(~`colorPalette('@{primary-color}', 5) `);
      //   color: @speed-dials-primary-color;
      //   border: @border-width-base color(~`colorPalette('@{primary-color}', 5) `) @border-style-base;
      // }

      &-hide {
        .hide-btn;
      }
    }
    &:hover {
      .fc-speed-dials-trigger-hide {
        display: block;
      }
    }
    // &:hover {
    //   text-shadow: @speed-dials-text-shadow;
    //   background-color: color(~`colorPalette('@{primary-color}', 5) `);
    //   color: @speed-dials-default-color;
    //   border: @border-width-base color(~`colorPalette('@{primary-color}', 5) `) @border-style-base;
    // }
  }

  &-action {
    width: @speed-dials-width-mini;
    position: relative;
    z-index: @zindex-speedDials - 1;
  }

  &-dial {
    display: flex;
    justify-content: center;
    align-items: center;
    width: @speed-dials-width-mini;
    height: @speed-dials-width-mini;
    border-radius: @speed-dials-width-mini;
    // border: @border-width-base @border-color-base @border-style-base;
    box-shadow: 0px 8px 22px -6px rgba(24, 39, 75, 0.12), 0px 14px 64px -4px rgba(24, 39, 75, 0.12);
    background-color: @white;
    padding: @padding-sm * 0.333 - 1px;
    margin: @padding-md 0;
    // box-shadow: @speed-dials-shadow;
    /** text-shadow: @speed-dials-text-shadow;  */
    cursor: pointer;
    transition: all @animation-duration-base @ease-base-in;

    &-title {
      .title-md;
    }

    &:hover {
      text-shadow: @speed-dials-text-shadow;
      // background-color: @speed-dials-item-active-bg;
      // border: @border-width-base color(~`colorPalette('@{primary-color}', 1) `) @border-style-base;
      // color: @white;
      box-shadow: 0px 8px 22px -6px rgba(24, 39, 75, 0.12),
        0px 14px 64px -4px rgba(24, 39, 75, 0.12);
    }
  }

  /** 顶部居右  */
  &-topLeft {
    left: 0;
    top: 0;
    flex-direction: column;
  }
  /** 顶部居右 */
  &-topRight {
    right: 0;
    top: 0;
    flex-direction: column;
  }
  /** 底部居右 */
  &-bottomRight {
    right: 0;
    bottom: 0;
    flex-direction: column-reverse;
  }
  /** 底部居左 */
  &-bottomLeft {
    left: 0;
    bottom: 0;
    flex-direction: column-reverse;
  }
  .hiddenShadow {
    box-shadow: none;
  }
}