.op3-element[data-op3-element-type="courseinfo"] {
    width: 100%;

    .op3-element-courseinfo__children {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        column-gap: 16px;
        row-gap: 8px;
    }

    .op3-element[data-op3-element-type="button"] {
        max-width: none;
        margin: 0;

        [data-op3-background="overlay"]::before,
        [data-op3-background="overlay"]::after {
            background-color: transparent;
        }

        > .op3-link {
            padding: 0;
            border-radius: 50px;

            .op3-text-container {
                font-size: 12px;
                line-height: 2;
            }
        }
    }

    .op3-element[data-op3-element-spec^="buttontaxonomy"] {
        [data-op3-background="overlay"]::before,
        [data-op3-background="overlay"]::after {
            background-color: #bababa;
        }

        > .op3-link {
            padding: 0 16px;
        }
    }
}

// To satisfy Typography Control Panel we must use stronger
// CSS selector for button link.
#op3-designer-element .op3-element[data-op3-element-type="courseinfo"] {
    .op3-element[data-op3-element-type="button"] {
        > .op3-link {
            color: gray;
        }
    }

    .op3-element[data-op3-element-spec^="buttontaxonomy"] {
        > .op3-link {
            color: #fff;
        }
    }
}