@use '../../style/themes/default.scss' as *;
@use '../../style/util.scss' as *;
@use './css-var.scss' as *;

@include set-tooltip-var($y);

@include popper-style('.y-popper.el-popper');

.y-tooltip-body,
.y-popover-body {
  box-sizing: border-box;
}

.y-tooltip-body {
  padding: yVar('tooltip', 'padding');
  position: relative;
  z-index: 2;
}

.y-popper.el-popper.y-tooltip {
  color: yVar('tooltip', 'color');
  font-size: yVar('tooltip', 'font-size');
  line-height: yVar('tooltip', 'line-height');
  padding: 0;
  background: yVar('tooltip', 'bg');
  border: yVar('tooltip', 'border');
  box-shadow: yVar('tooltip', 'shadow');
  border-radius: yVar('tooltip', 'radius');

  & > .el-popper__arrow::before {
    background: yVar('tooltip', 'arrow-bg');
    border: yVar('tooltip', 'border');
    box-shadow: yVar('tooltip', 'arrow-shadow');
  }

  &.is-dark {
    padding: 0;
  }

  &.is-light {
    color: yVar('tooltip-light', 'color');
    background: yVar('tooltip-light', 'bg');
    border: yVar('tooltip-light', 'border');
    box-shadow: yVar('tooltip-light', 'shadow');

    & > .el-popper__arrow::before {
      background: yVar('tooltip-light', 'arrow-bg');
      border: yVar('tooltip-light', 'border');
      box-shadow: yVar('tooltip-light', 'arrow-shadow');
    }
  }

  &.is-danger,
  &.is-danger > .el-popper__arrow::before {
    background: elVar('color-danger');
    border-color: elVar('color-danger');
  }

  &.is-warning,
  &.is-warning > .el-popper__arrow::before {
    background: elVar('color-warning');
    border-color: elVar('color-warning');
  }

  &.is-success,
  &.is-success > .el-popper__arrow::before {
    background: elVar('color-success');
    border-color: elVar('color-success');
  }
}

/* 气泡卡片 */
.y-popper.y-popover {
  color: yVar('popover', 'color');
  font-size: yVar('popover', 'font-size');
  line-height: inherit;
  text-align: left;
  min-width: 150px;
  padding: 0;
}

.y-popover-content {
  padding: yVar('popover', 'padding');
  box-sizing: border-box;
}

.y-popover-title {
  color: yVar('popover', 'title-color');
  font-size: yVar('popover', 'title-font-size');
  font-weight: yVar('popover', 'title-font-weight');
  padding: yVar('popover', 'title-padding');
  border-bottom: yVar('popover', 'title-border');
}