@import 'common/var.scss';

.qf-tooltip {
  &.qf-popper {
    background-color: $--color-primary !important;
    border: 1px solid $--color-primary;
    color: #fff;
    font-size: 13px;
    min-height: 32px;
    max-width: 250px;
    padding: 6px 16px;
    border-radius: 3px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  }

  &.qf-popper[x-placement^=right] {
    background-color: white;
    .popper__arrow {
      border-right-color: $--color-primary;
      &::after {
        border-right-color: $--color-primary;
      }
    }
  }

  &.qf-popper[x-placement^=left] {
    background-color: white;
    .popper__arrow {
      border-left-color: $--color-primary;
      &::after {
        border-left-color: $--color-primary;
      }
    }
  }

  &.qf-popper[x-placement^=top] {
    background-color: white;
    .popper__arrow {
      border-top-color: $--color-primary;
      &::after {
        border-top-color: $--color-primary;
      }
    }
  }

  &.qf-popper[x-placement^=bottom] {
    background-color: white;
    .popper__arrow {
      border-bottom-color: $--color-primary;
      &::after {
        border-bottom-color: $--color-primary;
      }
    }
  }

  &.qf-popper.qf-tooltip-warning {
    background-color: $--color-warning-bg !important;
    border: 1px solid $--color-warning-border;
    color: $--color-warning;

    &.qf-popper[x-placement^=right] {
      margin-left: 10px;
      .popper__arrow {
        border-right-color: $--color-warning-border;
        &::after {
          border-right-color: $--color-warning-bg;
        }
      }
    }

    &.qf-popper[x-placement^=left] {
      background-color: white;
      margin-right: 10px;
      .popper__arrow {
        border-left-color: $--color-warning-border;
        &::after {
          border-left-color: $--color-warning-bg;
        }
      }
    }

    &.qf-popper[x-placement^=top] {
      background-color: white;
      margin-bottom: 10px;
      .popper__arrow {
        border-top-color: $--color-warning-border;
        &::after {
          border-top-color: $--color-warning-bg;
        }
      }
    }

    &.qf-popper[x-placement^=bottom] {
      background-color: white;
      margin-top: 10px;
      .popper__arrow {
        border-bottom-color: $--color-warning-border;
        &::after {
          border-bottom-color: $--color-warning-bg;
        }
      }
    }
  }

}