@import '../style/theme/color';
@import '../style/theme/shadow';
@import '../style/theme/corner';
@import '../style/core/_font';
@import '../style/theme/z-index';

:host-context(.devui-tooltip) {
  position: absolute;
  z-index: $devui-z-index-pop-up;
  display: block;
  font-style: normal;
  font-weight: normal;
  line-height: 1.5;
  line-break: auto;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  white-space: normal;
  font-size: $devui-font-size;
  opacity: 1;

  & .devui-tooltip-arrow {
    display: block;
  }

  &.top {
    margin-top: -5px;
    padding: 0;
    box-shadow: $devui-shadow-length-feedback-overlay rgba($devui-text, 0.2);

    & .devui-tooltip-arrow {
      bottom: -5px;
      left: 50%;
      transform: translateX(-50%);
      border-width: 5px 5px 0;
      border-top-color: $devui-feedback-overlay-bg;
    }
  }

  &.bottom {
    margin-top: 5px;
    padding: 0;
    box-shadow: $devui-shadow-length-feedback-overlay rgba($devui-text, 0.2);

    & .devui-tooltip-arrow {
      top: -5px;
      left: 50%;
      transform: translateX(-50%);
      border-width: 0 5px 5px;
      border-bottom-color: $devui-feedback-overlay-bg;
    }
  }

  &.left {
    margin-left: -5px;
    padding: 0;
    box-shadow: $devui-shadow-length-feedback-overlay rgba($devui-text, 0.2);

    & .devui-tooltip-arrow {
      top: 50%;
      right: -5px;
      transform: translateY(-50%);
      border-width: 5px 0 5px 5px;
      border-left-color: $devui-feedback-overlay-bg;
    }
  }

  &.right {
    margin-left: 5px;
    padding: 0;
    box-shadow: $devui-shadow-length-feedback-overlay rgba($devui-text, 0.2);

    & .devui-tooltip-arrow {
      top: 50%;
      left: -5px;
      transform: translateY(-50%);
      border-width: 5px 5px 5px 0;
      border-right-color: $devui-feedback-overlay-bg;
    }
  }

  .devui-tooltip-inner {
    max-width: 200px;
    padding: 4px 16px;
    font-size: $devui-font-size;
    color: $devui-feedback-overlay-text;
    letter-spacing: 0;
    line-height: 1.5;
    background: $devui-feedback-overlay-bg;
    box-shadow: none;
    overflow-wrap: break-word;
    word-break: break-word;
    word-wrap: break-word;
    text-align: start;
    border-radius: $devui-border-radius-feedback;
    min-height: 26px;
  }

  .devui-tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
  }
}
