#app .top-custom-content>.hide-on-cms,
#app .global-containers .top-custom-content,
#app .only-in-cms,
#app .top-custom-content .custom-buttons-wrapper:has(.custom-page-buttons > div:first-child .custom-button:empty),
#app .top-custom-content .custom-images-wrapper:not(:has(.custom-page-images > div:first-child .custom-image img[src^="http"])),
#app .top-custom-content .custom-text-wrapper:has(.custom-text > span:first-child:empty) {
    display: none !important;
}

.top-custom-content {
    --dark-color: #333;
    --white-color: #fff;
    text-align: var(--content-alignment, left);
    box-sizing: border-box;

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    &>div {
        padding: 20px;
    }
}

.top-custom-content .custom-page-buttons,
.top-custom-content .custom-page-images {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: var(--content-justify, flex-start);
}

.top-custom-content .custom-page-buttons {
    container-type: inline-size;
}

.top-custom-content .custom-page-buttons>div {
    display: inline-flex;
    padding: 0.75rem 1.5rem;
    background-color: var(--embed-button-bg, var(--primary-color, #4F46E5));
    color: var(--embed-button-text, #ffffff);
    text-decoration: none;
    border-radius: var(--embed-button-border-radius, 6px);
    border: 1px solid var(--embed-button-border-color, var(--primary-color, #4F46E5));
    font-weight: 500;
    transition: all 0.2s ease;
    position: relative;
    isolation: isolate;
    align-items: center;
    gap: 0.3rem;
    text-align: center;

    &:not(:has(svg)) {
        justify-content: center;
    }

    @container (max-width: 300px) {
        flex: 1;
        text-align: center;
    }

    a {
        color: currentColor;
        text-decoration: none;

        &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            display: block;
        }
    }
}

.top-custom-content .custom-page-buttons>div:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.top-custom-content .custom-button-icon {
    display: inline-block;
    margin-right: 0.5rem;
    vertical-align: middle;
    color: var(--embed-button-icon-color, #FFF);
    order: -1;

    &:not(:has(svg)) {
        display: none;
    }

    svg {
        display: block;
        width: auto;
        height: var(--embed-button-icon-size, 35px);
    }

    svg,
    svg * {
        fill: currentColor;
    }
}

.top-custom-content .btn-icon-top.custom-buttons-wrapper .custom-page-buttons>div {
    flex-direction: column;
    justify-content: center;
    align-items: var(--content-justify, flex-start);

    svg {
        width: auto;
        height: var(--embed-button-icon-size, 35px);
    }
}

.top-custom-content .btn-icon-top .custom-button-icon {
    margin-right: 0;
    margin-bottom: 0.25rem;
}

.top-custom-content .custom-buttons-wrapper:not(.btn-icon-top) .custom-page-buttons>div:has(svg) {
    text-align: left;
}

.top-custom-content .custom-image a:hover img {
    opacity: 0.85;
}

.top-custom-content .custom-image img,
.top-custom-content .custom-page-images img {
    width: var(--embed-image-default-width, auto);
    max-width: 100%;
    height: var(--embed-image-default-height, auto);
    border-radius: var(--embed-image-border-radius, 5px);
    transition: all 0.35s ease;
}

.top-custom-content .custom-text-wrapper,
.top-custom-content .custom-text {
    background-color: var(--embed-container-bg, transparent);
    color: var(--embed-text-color, #333333);
    border-radius: var(--embed-container-border-radius, 5px);
}

.top-custom-content .custom-text-wrapper .custom-text {
    color: var(--embed-text-color, #333333);
    line-height: 1.6;
    width: 100%;
}

.top-custom-content .custom-text-wrapper .custom-text p {
    margin-bottom: 1rem;
}

.top-custom-content .custom-text p:last-child {
    margin-bottom: 0;
}

.top-custom-content .custom-text a {
    color: var(--embed-link-color, var(--primary-color, #4F46E5));
    text-decoration: underline;
}

.top-custom-content .custom-text-icon {
    color: var(--embed-text-icon-color, var(--primary-color, #4F46E5));
    order: -1;

    &:not(:has(svg)) {
        display: none;
    }

    svg {
        display: block;
        width: auto;
        height: var(--embed-text-icon-size, 45px);
    }

    svg,
    svg * {
        fill: currentColor;
    }
}

.top-custom-content .custom-text-wrapper:has(.custom-text-icon svg) {
    display: flex;
    align-items: center;
    justify-content: var(--content-alignment, flex-start);
    ;
    gap: 0.5rem;

    .custom-text {
        width: auto;
    }

    .custom-text-icon {
        flex-shrink: 0;
        margin-top: 0.2em;
    }

    &.text-icon-top {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: var(--content-alignment, flex-start);
    }

}