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

@listPrefixCls: bs-float-button;

.slider-style(@color) {
  width: 40px;
  height: 40px;
  background: linear-gradient(-180deg, #4ba7ff 0%, #5374ff 100%);
  border-radius: 50%;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.@{listPrefixCls} {
  .@{listPrefixCls}-shade {
    position: fixed;
    width: 100%;
    bottom: 0;
    background: linear-gradient(-180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
  }
  .@{listPrefixCls}-wrapper {
    position: fixed;
    z-index: 999999;
    .@{listPrefixCls}-center {
      position: absolute;
      z-index: 999;
      .slider-style(#2988ff);
      svg {
        color: #fff;
        width: 60%;
        height: 60%;
        transform: rotate(0deg);
      }
      .@{listPrefixCls}-icon-rotate {
        .animation(iconRotate 300ms linear forwards);
        .keyframes(iconRotate, {
          0% { transform: rotate(0deg) }
          100% { transform: rotate(-135deg) }
        });
      }
      .@{listPrefixCls}-icon-reverse-rotate {
        .animation(iconNoRotate 300ms linear forwards);
        .keyframes(iconNoRotate, {
          0% { transform: rotate(-135deg) }
          100% { transform: rotate(0deg) }
        });
      }
      .@{listPrefixCls}-child {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 1 !important;
        .@{listPrefixCls}-child-wrapper {
          .slider-style(#2988ff);
        }
      }
    }
  }
}

.keyframes(@name; @arguments) {
	@-webkit-keyframes @name { @arguments(); }
	@keyframes @name { @arguments(); }
}

.animation(@arguments) {
	-webkit-animation: @arguments;
	animation: @arguments;
}