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

    [data-op3-element-container] {
        display: flex;
        align-items: flex-start;
        justify-content: normal;
    }

    a {
        align-self: center;
        //font-weight: inherit;
        //font-style: inherit;
        //text-decoration: inherit;
        //text-transform: inherit;
        //text-shadow: inherit;
        //color: inherit;
    }

    .op3-icon,
    .op3-image {
        display: inline;

        // ensure it's always the same width
        width: 2em;
        flex-shrink: 0;
        flex-grow: 0;

        // Alignment
        font-size: 100%;
        line-height: inherit;
        text-align: center;
        transition: inherit;

        &::before,
        svg {
            display: inline;
            line-height: inherit;
        }
    }

    .op3-image {
        align-self: flex-start;
    }

    // For some reason svgs are not perfectly aligned with text
    // on frontend. If someone finds better solution for this,
    // please apply it. Until then...
    .op3-icon svg {
        margin-top: -0.225em
    }

    [data-op3-contenteditable] {
        display: flex;
        font-size: inherit;
        line-height: inherit;
        min-width: 0.5em;
    }
}

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