@import '_theme.scss';

.popper-tooltip {
  --tip-position-left: 0px;
  --tip-position-bottom: 0px;
  --tip-rotation: 225deg;
  width: fit-content;
  height: fit-content;
  font-family: inherit;
  max-width: 350px;
  color: var(--text-color-ultra-dark);
  border-radius: 5px;
  z-index: 1000;
  padding: 12px 15px;
  font-size: var(--text-size-regular);
  border-width: 0.5rem 0.5rem 0;
  position: absolute;

  .popper-tooltip-inner {
    max-width: 180px;
    display: flex;
    align-items: start;
    position: relative;
  }

  @media (min-width: $lg) {
    max-width: 350px;
  }

  &:after {
    position: absolute;
    content: "";
    height: 10px;
    width: 10px;
    border-bottom: inherit;
    border-right: inherit;
    transform: rotate(var(--tip-rotation));
    bottom: var(--tip-position-bottom);
    left: var(--tip-position-left);
  }

  &.warning:after {
    background-color: #f1f1f3;
  }

  &.error:after {
    background-color: #fff7f7;
  }

  .error-icon {
    display: none;
  }
  &.warning {
    background-color: #f1f1f3;
    box-shadow: 0 0 5px 1px #d6d6d6;
  }

  &.error {
    background-color: #fff7f7;
    border: 1px solid var(--color-error);
    .error-icon {
      margin-right: 8px;
      display: block;
    }
  }

}
