.op3-element[data-op3-element-type="descriptionlistitem"] {

    [data-op3-element-container] {
        display: flex;
    }

    .op3-descriptionlistitem-key,
    .op3-descriptionlistitem-value {
        z-index: 1;
    }

    .op3-descriptionlistitem-key {
        width: 100%;
        text-align: left;
    }

    .op3-descriptionlistitem-value {
        display: flex;
        flex: 1;
        width: auto;
        text-align: left;

        [data-op3-indent] {
            width: 2em;
        }

        [data-op3-contenteditable] {
            flex: 1;
        }
    }

}

.op3-element[data-op3-element-type="descriptionlist"] [data-op3-field-layout-desktop="stacked"] .op3-element[data-op3-element-type="descriptionlistitem"] {
    [data-op3-element-container] {
        flex-direction: column;
        align-items: stretch;
    }
    .op3-descriptionlistitem-key {
        width: 100% !important;
    }
    .op3-descriptionlistitem-value {
        text-align: left;
        [data-op3-indent] {
            display: block !important;
        }
    }
}

.op3-element[data-op3-element-type="descriptionlist"] [data-op3-field-layout-desktop="inline"] .op3-element[data-op3-element-type="descriptionlistitem"] {
    [data-op3-element-container] {
        flex-direction: row;
        align-items: flex-end;
    }
    .op3-descriptionlistitem-key {
        width: 50%;
    }
    .op3-descriptionlistitem-value {
        text-align: right;
        [data-op3-indent] {
            display: none !important;
        }
    }
}

@media (max-width: $breakpoint-tablet) {
    .op3-element[data-op3-element-type="descriptionlist"] [data-op3-field-layout-tablet="stacked"] .op3-element[data-op3-element-type="descriptionlistitem"] {
        [data-op3-element-container] {
            flex-direction: column;
            align-items: stretch;
        }
        .op3-descriptionlistitem-key {
            width: 100% !important;
        }
        .op3-descriptionlistitem-value {
            text-align: left;
            [data-op3-indent] {
                display: block !important;
            }
        }
    }

    .op3-element[data-op3-element-type="descriptionlist"] [data-op3-field-layout-tablet="inline"] .op3-element[data-op3-element-type="descriptionlistitem"] {
        [data-op3-element-container] {
            flex-direction: row;
            align-items: flex-end;
        }
        .op3-descriptionlistitem-value {
            text-align: right;
            [data-op3-indent] {
                display: none !important;
            }
        }
    }
}

@media (max-width: $breakpoint-mobile) {
    .op3-element[data-op3-element-type="descriptionlist"] [data-op3-field-layout-mobile="stacked"] .op3-element[data-op3-element-type="descriptionlistitem"] {
        [data-op3-element-container] {
            flex-direction: column;
            align-items: stretch;
        }
        .op3-descriptionlistitem-key {
            width: 100% !important;
        }
        .op3-descriptionlistitem-value {
            text-align: left;
            [data-op3-indent] {
                display: block !important;
            }
        }
    }

    .op3-element[data-op3-element-type="descriptionlist"] [data-op3-field-layout-mobile="inline"] .op3-element[data-op3-element-type="descriptionlistitem"] {
        [data-op3-element-container] {
            flex-direction: row;
            align-items: flex-end;
        }
        .op3-descriptionlistitem-value {
            text-align: right;
            [data-op3-indent] {
                display: none !important;
            }
        }
    }
}