/*! rtl:begin:ignore */
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './token.less';

@popconfirm-prefix-cls: ~'@{kd-prefix}-popconfirm';

@popconfirm-title-line-height: 21px;
@popconfirm-box-shadow-blur: 16px;

.showdow(@x, @y) {
  box-shadow: @x @y @popconfirm-box-shadow-blur 3px rgba(0, 0, 0, 0.08);
}

.@{popconfirm-prefix-cls} {
  .reset-component;
  border-radius: @popconfirm-border-radius;
  background-color: @popconfirm-background-color;
  opacity: 1;
  z-index: @z-index-popper;
  visibility: visible;

  &.hidden {
    opacity: 0;
    visibility: hidden;
  }

  &[class*='top'] {
    .showdow(0, 6px);
  }

  &[class*='bottom'] {
    .showdow(0, -6px);
  }

  &[class*='left'] {
    .showdow(6px, 0);
  }

  &[class*='right'] {
    .showdow(-6px, 0);
  }

  // 箭头样式
  .popperArrow(@popconfirm-background-color, @popconfirm-horizontal-gap, @popconfirm-box-shadow-blur);

  &-content {
    .reset-component;
    width: @popconfirm-width;
    padding: @popconfirm-vertical-gap @popconfirm-horizontal-gap;
  }

  &-title {
    line-height: @popconfirm-title-line-height;
    color: @popconfirm-title-color;
    font-size: @popconfirm-title-font-size;

    i {
      margin-right: @popconfirm-title-icon-margin-right;
      vertical-align: top;
      line-height: @popconfirm-title-line-height;
      color: @popconfirm-icon-color;
      font-size: @popconfirm-icon-size;
    }
  }

  &-message {
    color: @popconfirm-message-color;
    font-size: @popconfirm-message-font-size;
    line-height: 18px;
    margin: @popconfirm-message-margin-top 0 @popconfirm-message-margin-bottom;
  }

  &-interaction {
    text-align: right;

    button:not(:last-child) {
      margin-right: @popconfirm-button-spacing;
    }
  }
  
  .arrow::before {
    border-color: @tooltip-background-color;
  }
}
.@{popconfirm-prefix-cls}-rtl {
  direction: rtl;

  .@{popconfirm-prefix-cls}-interaction {
    text-align: left;

    button:not(:last-child) {
      margin-left: @popconfirm-button-spacing;
      margin-right: 0;
    }
  }
  .@{popconfirm-prefix-cls}-title {
    i {
      margin-left: @popconfirm-title-icon-margin-right;
      margin-right: 0;
    }
  }
}
/*! rtl:end:ignore */