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

@speed-dials-prefix-cls: ~'@{sail-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-1;

@speed-dials-padding-base: 0 @padding-md - 1px;
@speed-dials-font-size-lg: @font-size-base;
@speed-dials-font-size-sm: @font1;
@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-prefix-cls} {
  position: fixed;
  display: flex;
  text-align: center;
  width: @speed-dials-width-base;
  margin: @speed-dials-width-base / 4;
  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-sm*2;
    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 / 3 - 1px;
    text-overflow: clip;
    margin-top: -(@padding-sm / 4) - 1px;
  }

  /** 隐藏按钮 */
  .hide-btn {
    .title-md;
    transform: translate(@speed-dials-width-base*0.4, -@speed-dials-width-base*0.75);
    box-shadow: @speed-dials-shadow;
    color: @font-color-placeholder;

    span.iconfont {
      font-size: @speed-dials-font-size-sm*1.5;
    }

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

  &-trigger {
    width: @speed-dials-width-base;
    height: @speed-dials-width-base;
    border-radius: @speed-dials-width-base;
    border: @border-width-base @border-color-base @border-style-base;
    background-color: @white;
    padding: @padding-sm / 3 - 1px;
    box-shadow: @speed-dials-shadow;
    cursor: pointer;
    position: relative;
    z-index: @zindex-speedDials;

    &-title {
      .title-md;
    }

    &-hide {
      .hide-btn;

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

    &-primary {
      background-color: @primary-color;
      box-shadow: @speed-dials-primary-shadow;
      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 {
      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-base;
    position: relative;
    z-index: @zindex-speedDials - 1;
  }

  &-dial {
    width: @speed-dials-width-base*0.9;
    height: @speed-dials-width-base*0.9;
    border-radius: @speed-dials-width-base;
    border: @border-width-base @border-color-base @border-style-base;
    background-color: @white;
    padding: @padding-sm / 3 - 1px;
    margin: @padding-sm - 1px @speed-dials-width-base*0.05;
    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: @link-color;
    }
  }

  /** 顶部居右  */
  &-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;
  }
}