.paragraph {
    @apply flow-root;
}

.paragraph,
.table-wrapper {
    .afbeeldinglinks {
        @apply md:float-left md:mr-6 mb-6;
    }

    .afbeeldingrechts {
        @apply md:float-right md:ml-6 mb-6;
    }

    a {
        @apply text-red underline;

        &::after {
            font-family: 'Font Awesome 5 Pro';
            display: inline-block;
            font-style: normal;
            font-variant: normal;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            font-weight: 900;
            margin-left: 0.25rem;
        }

        &::before {
            font-family: 'Font Awesome 5 Pro';
            display: inline-block;
            font-style: normal;
            font-variant: normal;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            font-weight: 900;
            margin-right: 0.25rem;
        }

        &[target='_blank'],
        &[href^='http'] {
            &::after {
                content: '\f35d';
            }
        }

        &[href$='.pdf'] {
            &::before {
                content: '\f1c1';
            }
        }

        &.button {
            &::after {
                display: none;
            }
            &::before {
                display: none;
            }
        }
    }

    p {
        @apply mb-4;
    }

    hr {
        @apply border-b border-solid border-gray my-8 border-t-0;
    }

    &.paragraph-intro {
        @apply text-intro font-semibold;
    }

    ul,
    ol {
        display: inherit;
        @apply mb-8 ml-4 md:ml-0;

        > li {
            @apply relative pl-6;

            &::before {
                @apply absolute left-0;
            }

            > ul {
                @apply mb-0;
            }
        }
    }

    ul {
        &:not([class*='custom-list']) {
            li {
                &::before {
                    content: '\2022';
                    margin-top: -2px;
                }
            }
        }

        &.custom-list-arrows {
            li {
                &::before {
                    content: '\f0da';
                    @apply font-bold;
                    font-family: 'Font Awesome 5 Pro';
                }
            }
        }

        &.custom-list-checkmarks {
            li {
                @apply pl-10;
            }

            li {
                &::before {
                    content: '\f00c';
                    @apply text-green;
                    font-family: 'Font Awesome 5 Pro';
                    @apply text-lg;
                    line-height: 1.5rem;
                }
            }
        }
    }

    ol {
        counter-reset: section;

        li {
            &::before {
                counter-increment: section;
                content: counter(section) '.';
            }
        }
    }
}

.red ul {
    &.custom-list-checkmarks {
        li {
            &::before {
                @apply text-white;
            }
        }
    }
}

.paragraph .custom-list-checkmarks li li,
.table-wrapper .custom-list-checkmarks li li {
    @apply pl-6;

    &::before {
        content: '\2022';
        margin-top: -2px;
        @apply text-md text-black;
    }
}