@import './token.less';

.@{prefix}-Tooltip {
  // &-dark{
  //   .@{prefix}-Tooltip-content{
  //     background-color: @tooltip-dark-color-bg;
  //   }
  //   .@{prefix}-Trigger-arrow.@{prefix}-Tooltip-arrow {
  //     background-color: @tooltip-dark-color-bg !important;
  //   }
  // }
  &-content {
    padding: @tooltip-padding-vertical @tooltip-padding-horizontal;
    background-color: @tooltip-color-bg;
    font-size: @tooltip-font-size;
    border-radius: @tooltip-border-radius;
    color: @tooltip-color-text;
    line-height: @line-height-base;
    box-shadow: @shadow2-down;

    &-inner {
      word-wrap: break-word;
      text-align: left;
      white-space: pre-wrap;
    }
  }

  &-mini {
    font-size: @tooltip-mini-font-size;
    padding: @tooltip-mini-padding-vertical @tooltip-mini-padding-horizontal;
  }

  .@{prefix}-Trigger-arrow&-arrow {
    background-color: @tooltip-color-bg;
  }
}

:root[data-theme='dark'] {
  .@{prefix}-Tooltip-content {
    border: @border-1 solid var(--color-border-2);
  }

  .@{prefix}-Tooltip .@{prefix}-Trigger-arrow.@{prefix}-Tooltip-arrow {
    z-index: 1;
  }

  .@{prefix}-Trigger {
    &[trigger-placement='top'] .@{prefix}-Trigger-arrow.@{prefix}-Tooltip-arrow,
    &[trigger-placement='tl'] .@{prefix}-Trigger-arrow.@{prefix}-Tooltip-arrow,
    &[trigger-placement='tr'] .@{prefix}-Trigger-arrow.@{prefix}-Tooltip-arrow {
      border-bottom: @border-1 solid var(--color-border-2);
      border-right: @border-1 solid var(--color-border-2);
    }

    &[trigger-placement='bottom'] .@{prefix}-Trigger-arrow.@{prefix}-Tooltip-arrow,
    &[trigger-placement='bl'] .@{prefix}-Trigger-arrow.@{prefix}-Tooltip-arrow,
    &[trigger-placement='br'] .@{prefix}-Trigger-arrow.@{prefix}-Tooltip-arrow {
      border-top: @border-1 solid var(--color-border-2);
      border-left: @border-1 solid var(--color-border-2);
    }

    &[trigger-placement='left'] .@{prefix}-Trigger-arrow.@{prefix}-Tooltip-arrow,
    &[trigger-placement='lt'] .@{prefix}-Trigger-arrow.@{prefix}-Tooltip-arrow,
    &[trigger-placement='lb'] .@{prefix}-Trigger-arrow.@{prefix}-Tooltip-arrow {
      border-top: @border-1 solid var(--color-border-2);
      border-right: @border-1 solid var(--color-border-2);
    }

    &[trigger-placement='right'] .@{prefix}-Trigger-arrow.@{prefix}-Tooltip-arrow,
    &[trigger-placement='rt'] .@{prefix}-Trigger-arrow.@{prefix}-Tooltip-arrow,
    &[trigger-placement='rb'] .@{prefix}-Trigger-arrow.@{prefix}-Tooltip-arrow {
      border-left: @border-1 solid var(--color-border-2);
      border-bottom: @border-1 solid var(--color-border-2);
    }
  }
}