/**
 * UserGuide Component Style for uxcore
 * @author buzhou
 *
 * Copyright 2015-2016, Uxcore Team, Alinw.
 * All rights reserved.
 */

@__userGuidePrefixCls: kuma-user-guide;

@keyframes kumaUserGuideBreathing {
  0%, 100% {
    animation-timing-function: spring(1 90 11 -0.2);
  }

  50% {
    transform: scale(2);
    animation-timing-function: linear;
  }
}


.@{__userGuidePrefixCls}{
  &-stage {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
    height: 0;
    width: 0;
    &.isBlocking {
      height: 100%;
      width: 100%;
      background: @dark-alpha-4;
    }
  }
  &-breathing-point {
    position: absolute;
    height: 20px;
    width: 20px;
  }
  &-hidden {
    display: none;
  }
  &-big {
    height: 10px;
    width: 10px;
    top: 5px;
    left: 5px;
    position: absolute;
    border-radius: 50%;
    background: @brand-primary-alpha-6;
    animation: kumaUserGuideBreathing;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }
  &-small {
    height: 10px;
    width: 10px;
    position: absolute;
    top: 5px;
    left: 5px;
    background: @brand-primary;
    border-radius: 50%;
  }
  &-stage-step-hint {
    width: 300px;
    .kuma-tooltip-inner {
      text-align: left;
      padding: 20px 24px;
    }
    &.kuma-tooltip-placement-bottomRight,
    &.kuma-tooltip-placement-topRight {
      .kuma-tooltip-arrow {
        right: 5px;
        left: auto;
      }
    }
  }
  &-step-hint-wrp {
    display: flex;
  }
  &-step-hint-title {
    font-size: 16px;
    color: @dark-alpha-2;
    margin-bottom: 12px;
  }
  &-step-hint-desc {
    font-size: 12px;
    color: @dark-alpha-3;
    img,
    video {
      width: 250px;
    }
  }
  &-hint-bottom {
    margin-top: 20px;
    overflow: auto;
    line-height: 28px;
    vertical-align: middle;
    button {
      float: right;
    }
    .kuma-button-secondary {
      margin-right: 8px;
    }
  }
  &-skip-text {
    font-size: 12px;
    color: @normal-alpha-4;
    cursor: pointer;
  }
  &-skip-checkbox {
    font-size: 12px;
    color: @normal-alpha-4;
    display: inline-block;
    .kuma-checkbox-group-item {
      margin-bottom: 0;
    }
  }
  &--step-hint-wrp {
    display: flex;
  }
  &-step-hint-icon {
    height: 38px;
    border-radius: 50%;
    border: 1px solid;
    line-height: 38px;
    text-align: center;
    margin-right: 24px;
    font-size: 20px;
    display: block;
    flex: 38px 0 0;
  }
}