.op3-element[data-op3-element-type="membersubscription"] {
    .op3-element[data-op3-element-type="membersubscriptionitem"] {
        &:last-child {
            margin-bottom: 0 !important;
        }
    }

    .op3-element-membersubscription__container {
        overflow-x: auto;
    }

    .op3-element-membersubscription__children {
        min-width: 900px;
    }

    .membersubscriptionitemlabel {
        display: none;
        font-weight: bold;
    }

    [data-op3-element-spec="membersubscriptionitemstatus"] .op3-text-wrapper p {
        color: #fff !important;
        background-color: #22c55e !important;
        display: inline-block;
        border-radius: 3px;
        padding: 3px 6px;
        text-align: center;
        font-size: 14px;
    }

    [data-op3-element-spec="membersubscriptionitemstatus"] .op3-text-wrapper p.opc-status-cancelled,
    [data-op3-element-spec="membersubscriptionitemstatus"] .op3-text-wrapper p.opc-status-refunded {
        background-color: #dd2929 !important;
    }

    [data-op3-element-spec="membersubscriptionitemstatus"] .op3-text-wrapper p.opc-status-pending {
        background-color: #ffbd21 !important;
    }

    [data-op3-element-spec="togglestatuserror"] {
        margin: 0;

        .op3-text-wrapper {
            background-color: rgb(242, 222, 222);
            padding: 1em;
        }

        p,
        h4 {
            font-weight: 400;
            text-align: center;
            color: rgb(169, 68, 66);
            font-weight: 400;
        }
    }

    [data-op3-element-spec="membersubscriptionitemcancelbutton"] [data-op-action="hidden"] {
        pointer-events: none !important;
        opacity: 0 !important;
    }
}

.op3-element[data-op3-element-type="membersubscriptionitem"] {
    &:last-child {
        margin-bottom: 0 !important;
    }

    .op3-element-membersubscriptionitem__children {
        display: grid;
        grid-template-columns: 50% 15% 20% 15%;
        gap: 15px;
        align-items: center;

        .op3-element {
            width: auto !important;
            margin-left: 0 !important;
            margin-right: 0 !important;

            &[data-op3-element-type="text"] {
                margin-bottom: 0px;
            }

            &[data-op3-element-type="button"] {
                max-width: 100% !important;
            }
        }
    }

    .op3-element-membersubscriptionitem__children:has([data-op3-element-spec="membersubscriptionitemcancelbutton"]) {
        grid-template-columns: 35% 15% 20% 15% 1fr;
    }
}

// Responsive
@media (max-width: 1024px) {
    .op3-element[data-op3-element-type="membersubscriptionheader"] {
        display: none;
    }

    .op3-element[data-op3-element-type="membersubscription"] {
        .op3-element-membersubscription__container {
            overflow-x: visible;
        }

        .op3-element-membersubscription__children {
            min-width: 160px;
        }

        .membersubscriptionitemlabel {
            display: inline-block;
            margin-right: 8px;
        }
    }

    .op3-element[data-op3-element-type="membersubscriptionitem"] .op3-element-membersubscriptionitem__children {
        grid-template-columns: 1fr !important;
    }

    .op3-element[data-op3-element-type="membersubscription"]
        [data-op3-element-spec="membersubscriptionitemcancelbutton"]
        [data-op-action="hidden"] {
        display: none;
    }
}

.op3-element[data-op3-element-type="membersubscription"] .op3-element[data-op3-element-spec="togglestatuserror"] {
    display: block;
}

html[data-op3-layer="designer"] .op3-element[data-op3-element-type="membersubscription"] {
    .op3-element-membersubscription__children:not([data-op3-toggle-status="error"]) {
        .op3-element[data-op3-element-spec="togglestatuserror"] {
            display: none;
        }
    }
}