@import '../../style/index.less';
@import 'intro.js/introjs.css';

@hl-prefix-cls--highlightClass: ~'@{xui-prefix}__intro--highlightClass';
@hl-prefix-cls--tooltipClass: ~'@{xui-prefix}__intro--tooltipClass';

.@{hl-prefix-cls--highlightClass} {
  .introjs-tooltiptext {
    color: rgba(0, 0, 0, 0.85);
    font-size: 16px;
  }
}
.@{hl-prefix-cls--tooltipClass} {
  .introjs-tooltipbuttons {
    display: flex;
    justify-content: flex-end;
    .introjs-button,
    .introjs-button:active,
    .introjs-button:focus {
      position: relative;
      display: inline-block;
      min-width: 42px;
      height: 20px;
      padding: 4px 8px;
      color: #666;
      font-weight: 400;
      font-size: 14px;
      white-space: nowrap;
      text-align: center;
      background: #fff;
      background-image: none;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
      cursor: pointer;
      transition: none;
      user-select: none;
      touch-action: manipulation;
    }
    .introjs-skipbutton,
    .introjs-disabled {
      display: none;
    }
    .introjs-donebutton {
      display: inline-block;
      order: 1;
      margin-right: 0;
    }
    .introjs-prevbutton {
      margin-right: 5px;
    }
    .introjs-prevbutton:hover,
    .introjs-prevbutton:active,
    .introjs-prevbutton:focus {
      color: #21c48e;
      border-color: #21c48e;
    }
    .introjs-nextbutton,
    .introjs-nextbutton:active,
    .introjs-nextbutton:focus,
    .introjs-donebutton,
    .introjs-donebutton:active,
    .introjs-donebutton:focus {
      color: #fff;
      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
      background: @primary-color;
      border-color: @primary-color;
      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
    }
    .introjs-nextbutton:hover,
    .introjs-donebutton:hover {
      color: #fff;
      background: @primary-5;
      border-color: @primary-5;
    }
  }
}

.introjs-helperLayer {
  transition: none;
}
.introjs-tooltipReferenceLayer {
  visibility: visible;
}