/**
* Copyright (c) 2022 - present TinyVue Authors.
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
*
* Use of this source code is governed by an MIT-style license.
*
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/

@import '../mixins/tooltip.less';
@import '../custom.less';
@import './vars.less';

@tooltip-prefix-cls: ~'@{css-prefix}tooltip';

.@{tooltip-prefix-cls} {
  .component-css-vars-tooltip();

  font-family: var(--ti-tooltip-popper-font-family);
  &:focus:hover,
  &:focus:not(.focusing) {
    outline-width: 0;
  }

  &&__popper {
    position: absolute;
    left: -9999px;
    border-radius: var(--ti-tooltip-popper-border-radius);
    padding: var(--ti-tooltip-padding-vertical) var(--ti-tooltip-padding-horizontal);
    font-size: var(--ti-tooltip-popper-font-size);
    line-height: var(--ti-tooltip-popper-font-line-height);
    min-width: 10px;
    max-width: 450px;
    z-index: 2000;
    word-wrap: break-word;
    box-shadow: var(--ti-tooltip-box-shadow);

    .popper__arrow,
    .popper__arrow::after {
      position: absolute;
      display: block;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
    }
    /* 控制箭头尺寸
    6px:  var(--ti-tooltip-popper-border-width);
    -6px:  var(--ti-tooltip-popper-neg-border-width);
    */
    .popper__arrow {
      border-width: var(--ti-tooltip-popper-border-width);
    }

    .popper__arrow::after {
      content: ' ';
      border-width: var(--ti-tooltip-popper-border-width);
    }

    &[x-placement^='top'] {
      margin-bottom: 12px;

      .popper__arrow {
        bottom: var(--ti-tooltip-popper-neg-border-width);
        border-top-color: var(--ti-tooltip-popper-border-color);
        border-bottom-width: 0;

        &::after {
          bottom: 1px;
          margin-left: var(--ti-tooltip-popper-neg-border-width);
          border-top-color: var(--ti-tooltip-popper-border-color);
          border-bottom-width: 0;
        }
      }
    }

    &[x-placement^='bottom'] {
      margin-top: 12px;

      .popper__arrow {
        top: var(--ti-tooltip-popper-neg-border-width);
        border-top-width: 0;
        border-bottom-color: var(--ti-tooltip-popper-border-color);

        &::after {
          top: 1px;
          margin-left: var(--ti-tooltip-popper-neg-border-width);
          border-top-width: 0;
          border-bottom-color: var(--ti-tooltip-popper-border-color);
        }
      }
    }

    &[x-placement^='right'] {
      margin-left: 12px;

      .popper__arrow {
        left: var(--ti-tooltip-popper-neg-border-width);
        border-right-color: var(--ti-tooltip-popper-border-color);
        border-left-width: 0;

        &::after {
          bottom: var(--ti-tooltip-popper-neg-border-width);
          left: 1px;
          border-right-color: var(--ti-tooltip-popper-border-color);
          border-left-width: 0;
        }
      }
    }

    &[x-placement^='left'] {
      margin-right: 12px;

      .popper__arrow {
        right: var(--ti-tooltip-popper-neg-border-width);
        border-right-width: 0;
        border-left-color: var(--ti-tooltip-popper-border-color);

        &::after {
          right: 1px;
          bottom: var(--ti-tooltip-popper-neg-border-width);
          margin-left: var(--ti-tooltip-popper-neg-border-width);
          border-right-width: 0;
          border-left-color: var(--ti-tooltip-popper-border-color);
        }
      }
    }
    &.is-normal {
      .tooltip-type(
        var(--ti-tooltip-popper-normal-text-color),
        var(--ti-tooltip-popper-normal-bg-color),
        var(--ti-tooltip-popper-normal-border-color)
      );
    }

    &.is-info {
      .tooltip-type(
        var(--ti-tooltip-popper-info-text-color),
        var(--ti-tooltip-popper-info-bg-color),
        var(--ti-tooltip-popper-info-border-color)
      );
    }

    &.is-error {
      .tooltip-type(
        var(--ti-tooltip-popper-error-text-color),
        var(--ti-tooltip-popper-error-bg-color),
        var(--ti-tooltip-popper-error-border-color)
      );

      .tooltip-validate-icon {
        fill: var(--ti-tooltip-validate-icon-color);
        margin-right: 8px;
      }
    }

    &.is-warning {
      .tooltip-type(
        var(--ti-tooltip-popper-warning-text-color),
        var(--ti-tooltip-popper-warning-bg-color),
        var(--ti-tooltip-popper-warning-border-color)
      );
    }

    &.is-success {
      .tooltip-type(
        var(--ti-tooltip-popper-success-text-color),
        var(--ti-tooltip-popper-success-bg-color),
        var(--ti-tooltip-popper-success-border-color)
      );
    }

    &.is-dark {
      background: var(--ti-tooltip-popper-dark-bg-color);
      color: var(--ti-tooltip-popper-dark-text-color);
    }

    &.is-light {
      .tooltip-light(
        var(--ti-tooltip-popper-light-text-color),
        var(--ti-tooltip-popper-light-bg-color),
        var(--ti-tooltip-popper-light-border-color)
      );
    }

    &.is-blank-content {
      display: none;
    }
  }
}
