@import './token.less';
@import '../../../theme/variables.less';

.@{prefix}-tooltip {
  &-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;
    }
  }

  &-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;
  }
}

@{arco-theme-tag} {
  &[arco-theme='dark'] {
    .@{prefix}-tooltip-content {
      border: @border-1 solid var(~'@{arco-cssvars-prefix}-color-neutral-3');
    }

    .@{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(~'@{arco-cssvars-prefix}-color-neutral-3');
        border-right: @border-1 solid var(~'@{arco-cssvars-prefix}-color-neutral-3');
      }

      &[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(~'@{arco-cssvars-prefix}-color-neutral-3');
        border-left: @border-1 solid var(~'@{arco-cssvars-prefix}-color-neutral-3');
      }

      &[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(~'@{arco-cssvars-prefix}-color-neutral-3');
        border-right: @border-1 solid var(~'@{arco-cssvars-prefix}-color-neutral-3');
      }

      &[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(~'@{arco-cssvars-prefix}-color-neutral-3');
        border-bottom: @border-1 solid var(~'@{arco-cssvars-prefix}-color-neutral-3');
      }
    }
  }
}