.op3-element[data-op3-element-type="bulletlist"] {
    max-width: 100%;
    //margin: 0;
    line-height: 1.5;
    row-gap: inherit;

    // Using flex gap for items spacing, no margin should be used!
    margin: 0 !important;

    .op3-element-bulletlist__container {
        display: flex;
        align-items: flex-start;
        justify-content: normal;
    }

    // Content in front of background.
    .op3-element-bulletlist__canvas ~ * {
        z-index: 1;
    }

    // Ensure icon and image are always the same width.
    .op3-element-bulletlist__bullet {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 2em;
        flex-shrink: 0;
        flex-grow: 0;
        font-size: 100%;
        line-height: inherit;
        text-align: center;
        transition: inherit;

        // Line height does not work if there is no text in element (there is
        // only svg in our case), so adding zero width space to force height to
        // fit line height.
        &::after {
            content: "\200b";
        }

        svg {
            display: inline;
            line-height: inherit;

            image {
                width: 100%;
                height: 100%;
            }
        }
    }

    // This will prevent element grow.
    .op3-element-bulletlist__link,
    .op3-element-bulletlist__text {
        min-width: 0;
    }

    .op3-element-bulletlist__text {
        min-width: 0.5em;
        font-size: inherit;
        line-height: inherit;
    }
}

// To satisfy Typography Control Panel we must use stronger
// CSS selector for bulletlist links.
#op3-designer-element .op3-element[data-op3-element-type="bulletlist"] .op3-element-bulletlist__link {
    font-weight: inherit;
    font-style: inherit;
    text-decoration: inherit;
    text-transform: inherit;
    text-shadow: inherit;
    color: inherit;
}