.information-tooltip {
    max-width: 450px;
    max-height: 80vh;
    transition: opacity 0.3s;
    @apply z-tooltip;
    /* pointer-events: none; */
    @apply text-16 leading-150;
    @apply absolute rounded-8 opacity-0 flex;

    /* Needed to stop scroll bar from killing the border */
    @apply py-2 pr-2;

    .content {
        @apply py-16 px-20;
        @apply overflow-auto;
    }

    code {
        overflow-wrap: break-word;
        &[data-hl-from] {
            cursor: help;
        }
    }

    & :not(pre) > code {
        @apply bg-thick-border-blue px-[6px] py-[1px] rounded-5;
    }

    pre + p {
        @apply mt-6;
    }
    pre {
        @apply mt-2;
    }

    p:not(:last-child) {
        @apply mb-10;
    }
    ul {
        @apply list-disc ml-20;
        li {
        }
    }

    .tooltip-arrow {
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-right: 10px solid;

        content: "";
        position: absolute;
        top: 6px;
        left: -10px;
    }

    &.description {
        @apply bg-white text-primary-blue border-2 border-blue-500;

        filter: drop-shadow(0px 4px 8px rgba(79, 114, 205, 0.5));

        .tooltip-arrow {
            border-right-color: rgb(59 130 246);
        }

        hr {
            @apply my-12 opacity-[0.5];
        }
        h3 {
            @apply font-medium mb-4;
        }
    }

    &.error {
        @apply bg-white border-2 border-red-500;

        @apply p-0;

        filter: drop-shadow(0px 4px 8px rgba(79, 114, 205, 0.5));

        h2 {
            @apply text-darkRed;
            @apply font-semibold;
            @apply py-8 px-20;
            @apply relative z-tooltip-content bg-red-100;
            @apply rounded-t-[6px];

            .tooltip-close {
                @apply float-right -mr-10;
            }
        }
        .content {
            @apply rounded-6;
            @apply text-textColor1;
            @apply pt-10 px-20 pb-12;
            @apply relative z-tooltip-content bg-white;
            @apply rounded-b-8;
            & > *:first-child {
                margin-top: 0;
            }
            & > *:last-child {
                margin-bottom: 0;
            }
        }
        & > .content {
            @apply p-0;
        }

        .tooltip-arrow {
            border-right-color: rgb(239 68 68);
        }
    }
}
