.op3-element[data-op3-element-type="lessonandmodulelist"] {
    max-width: 800px;
    margin: 0 auto;

    .op3-element[data-op3-element-type$="content"] {
        &:not([data-op3-element-type="coursecontent"]) {
            margin-top: 1em;
        }
        padding: 16px 24px;

        > [data-op3-element-container] > [data-op3-border] {
            border-radius: 8px;
        }

        > [data-op3-element-container] > [data-op3-border] > [data-op3-background="overlay"]::before,
        > [data-op3-element-container] > [data-op3-border] > [data-op3-background="overlay"]::after {
            background: #f2f2f2;
        }

        [data-op3-children] {
            display: flex;
            flex-wrap: nowrap;
            flex-direction: row;
            column-gap: 24px;
            row-gap: 6px;
            align-items: flex-start;
            border-radius: 12px;
            overflow-wrap: break-word;
        }

        .op3-element {
            margin: 0;
            padding: 0;
            align-self: center;
            text-align: left;

            &[data-op3-element-spec="wrapflexrowtext"],
            &[data-op3-element-spec="icon"] {
                align-self: flex-start;
            }
        }
    }

    .op3-element {
        &[data-op3-element-spec^="wrapflex"] {
            width: 100%;
            flex: 1;
            align-items: flex-start;

            > [data-op3-children] {
                display: flex;
                flex-wrap: nowrap;
            }
        }

        &[data-op3-element-spec^="wrapflexrow"] > [data-op3-children] {
            flex-direction: row;
        }

        &[data-op3-element-spec^="wrapflexcolumn"] > [data-op3-children] {
            flex-direction: column;

            > .op3-element {
                width: 100%;
            }
        }

        &[data-op3-element-spec="image"] {
            max-width: 100%;
            width: 192px;
        }

        &[data-op3-element-spec="icon"] {
            .op3-icon {
                font-size: 20px;
            }
        }

        &[data-op3-element-spec="title"] {
            flex: 1;
            display: block;
            width: auto;
            text-align: left;

            p {
                margin: 0;
                font-weight: bold;
            }

            // When whole title is link...
            a {
                font-weight: inherit !important;
                font-style: inherit !important;
                text-transform: inherit !important;
                text-decoration: inherit !important;
                text-shadow: inherit !important;
                color: inherit !important;
            }
        }

        &[data-op3-element-spec="duration"] {
            width: auto;
            text-align: right;

            p {
                margin: 0;
                color: #808080;
            }
        }

        &[data-op3-element-spec="summary"] {
            width: auto;
            text-align: left;
        }

        &[data-op3-element-spec="schedule"] {
            width: auto;
            text-align: left;
        }

        &[data-op3-element-spec="dropdown"] {
            padding: 0 12px;

            .op3-icon {
                font-size: 1.25em;
            }
        }

        &[data-op3-element-spec="action"] {
            max-width: 138px;
            width: 100%;
            text-align: center;

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

            a {
                height: 36px;
                padding: 0 8px;
                border-radius: 18px;
            }

            .op3-text-container {
                font-size: 14px;
            }
        }
    }

    // Block display
    > [data-op3-element-container] {
        &:not([data-op3-block-display-courses="1"]) .op3-element[data-op3-element-type="coursecontent"],
        &:not([data-op3-block-display-modules="1"]) .op3-element[data-op3-element-type="modulecontent"],
        &:not([data-op3-block-display-chapters="1"]) .op3-element[data-op3-element-type="chaptercontent"],
        &:not([data-op3-block-display-lessons="1"]) .op3-element[data-op3-element-type="lessoncontent"] {
            display: none !important;
        }
    }

    // Dropdown content visibility and icon direction
    .op3-lessonandmodulelist-dropdown {
        transition: height 0.2s ease;
        overflow: hidden;
    }

    .op3-lessonandmodulelist-dropdown--inactive:not(.op3-lessonandmodulelist-dropdown--toggling) > .op3-element:not([data-op3-element-type$="content"]) {
        display: none;
    }

    .op3-element[data-op3-element-spec="dropdown"] {
        transition: transform 0.2s ease;
    }

    .op3-lessonandmodulelist-dropdown:not(.op3-lessonandmodulelist-dropdown--inactive):not(.op3-lessonandmodulelist-dropdown--toggling),
    .op3-lessonandmodulelist-dropdown.op3-lessonandmodulelist-dropdown--inactive.op3-lessonandmodulelist-dropdown--toggling {
        > .op3-element[data-op3-element-type$="content"] .op3-element[data-op3-element-spec="dropdown"] {
            transform: scaleY(-1);
        }
    }
}