@use '_theme.scss';

.popper-tooltip {
  --tip-position-left: 0px;
  --tip-position-bottom: 0px;
  --tip-background: #f1f1f3;
  --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: 2;
  padding: 12px 15px;
  font-size: var(--text-size-regular);
  border-width: 0.5rem 0.5rem 0;
  position: absolute;

  .popper-tooltip-inner {
    width: 200px;
    align-items: flex-start;
    position: relative;

    .close-popper {
      position: absolute;
      top: 0;
      left: 93%;
      cursor: pointer;
      border: none;
      background: none;
      display: inherit;

      & svg {
        width: 10px;
        height: 10px;
      }
    }

    .popover-message {
      white-space: pre-wrap;
    }
  }

  .additional-popover-message {
    margin-top: 10px;
    padding-left: 20px;
    max-width: 180px;
    color: var(--text-color-ultra-dark);
  }

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

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

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

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