/**
 * Advanced Border Container Styles
 */

/* Container with advanced border enabled */
.advanced-border-enabled-yes {
    /* CSS Variables pentru culori și gradient */
    --element-color: var(--e-global-color-accent);
    --mask-gradient-opacity-1: 1;
    --mask-gradient-position-1: 20%;
    --mask-gradient-opacity-2: 0;
    --mask-gradient-position-2: 80%;
    --mask-gradient-angle: 45deg;
    --margin-distance-x: 18px;
    --margin-distance-y: 18px;
    --angle-size: 16px;
    --advanced-line-width: 20%;

    position: relative;
}

/* Responsive */
@media (min-width: 768px) {
    .advanced-border-enabled-yes {
        --margin-distance-x: 24px;
        --margin-distance-y: 24px;
    }

    .advanced-border-enabled-yes.border-size-large {
        --margin-distance-x: 60px;
        --margin-distance-y: 60px;
        --angle-size: 30px;
    }
}

.advanced-border-enabled-yes.no-h-paddings-yes {
    --margin-distance-x: 0px !important;
}

.advanced-border-enabled-yes.no-v-paddings-yes {
    --margin-distance-y: 0px !important;
}

/* Advanced Border Overlay - positioned absolutely */
.advanced-border-enabled-yes > .advanced-border-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;

    -webkit-mask-image: linear-gradient(
        var(--mask-gradient-angle),
        rgba(0, 0, 0, var(--mask-gradient-opacity-1))
            var(--mask-gradient-position-1),
        rgba(0, 0, 0, var(--mask-gradient-opacity-2))
            var(--mask-gradient-position-2)
    );
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;

    mask-image: linear-gradient(
        var(--mask-gradient-angle),
        rgba(0, 0, 0, var(--mask-gradient-opacity-1))
            var(--mask-gradient-position-1),
        rgba(0, 0, 0, var(--mask-gradient-opacity-2))
            var(--mask-gradient-position-2)
    );
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
}

.advanced-border-enabled-yes > .advanced-border-overlay > * {
    display: block;
    position: absolute;
    background-color: var(--element-color);
}

.advanced-border-enabled-yes
    > .advanced-border-overlay
    > .advanced-border-top-left-angle {
    height: 1px;
    width: calc(var(--angle-size) * 1.41421356237);
    transform: rotate(-45deg);
    transform-origin: right top;
    top: var(--margin-distance-y);
    right: calc(100% - var(--margin-distance-x) - var(--angle-size));
}

/**/

.advanced-border-enabled-yes
    > .advanced-border-overlay
    > .advanced-border-top-left-line {
    height: 1px;
    top: var(--margin-distance-y);
    left: calc(var(--margin-distance-x) + var(--angle-size));
    right: calc(
        var(--margin-distance-x) + var(--angle-size) + 50% +
            (var(--advanced-line-width) / 2)
    );
}

.advanced-border-enabled-yes
    > .advanced-border-overlay
    > .advanced-border-top-center-angle-1 {
    height: 1px;
    width: calc(var(--angle-size) * 1.41421356237);
    transform: rotate(45deg);
    transform-origin: left bottom;
    top: var(--margin-distance-y);
    left: calc(
        50% - var(--advanced-line-width) / 2 - var(--margin-distance-x) -
            var(--angle-size)
    );
}

.advanced-border-enabled-yes
    > .advanced-border-overlay
    > .advanced-border-top-center-line {
    height: 1px;
    top: calc(var(--margin-distance-y) + var(--angle-size));
    left: calc(50% - var(--advanced-line-width) / 2 - var(--margin-distance-x));
    right: calc(
        50% - var(--advanced-line-width) / 2 - var(--margin-distance-x)
    );
}

.advanced-border-enabled-yes
    > .advanced-border-overlay
    > .advanced-border-top-center-angle-2 {
    height: 1px;
    width: calc(var(--angle-size) * 1.41421356237);
    transform: rotate(-45deg);
    transform-origin: right bottom;
    top: var(--margin-distance-y);
    right: calc(
        50% - var(--advanced-line-width) / 2 - var(--margin-distance-x) -
            var(--angle-size)
    );
}

.advanced-border-enabled-yes
    > .advanced-border-overlay
    > .advanced-border-top-right-line {
    height: 1px;
    top: var(--margin-distance-y);
    left: calc(
        var(--margin-distance-x) + var(--angle-size) + 50% +
            (var(--advanced-line-width) / 2)
    );
    right: calc(var(--margin-distance-x) + var(--angle-size));
}

/**/

.advanced-border-enabled-yes
    > .advanced-border-overlay
    > .advanced-border-top-right-angle {
    height: 1px;
    width: calc(var(--angle-size) * 1.41421356237);
    transform: rotate(45deg);
    transform-origin: left top;
    top: var(--margin-distance-y);
    left: calc(100% - var(--margin-distance-x) - var(--angle-size));
}

.advanced-border-enabled-yes
    > .advanced-border-overlay
    > .advanced-border-right-line {
    width: 1px;
    right: var(--margin-distance-x);
    top: calc(var(--margin-distance-y) + var(--angle-size));
    bottom: calc(var(--margin-distance-y) + var(--angle-size));
}

.advanced-border-enabled-yes
    > .advanced-border-overlay
    > .advanced-border-bottom-right-angle {
    height: 1px;
    width: calc(var(--angle-size) * 1.41421356237);
    transform: rotate(-45deg);
    transform-origin: left bottom;
    bottom: var(--margin-distance-y);
    left: calc(100% - var(--margin-distance-x) - var(--angle-size));
}

.advanced-border-enabled-yes
    > .advanced-border-overlay
    > .advanced-border-bottom-line {
    height: 1px;
    bottom: var(--margin-distance-y);
    left: calc(var(--margin-distance-x) + var(--angle-size));
    right: calc(var(--margin-distance-x) + var(--angle-size));
}

.advanced-border-enabled-yes
    > .advanced-border-overlay
    > .advanced-border-bottom-left-angle {
    height: 1px;
    width: calc(var(--angle-size) * 1.41421356237);
    transform: rotate(45deg);
    transform-origin: right bottom;
    bottom: var(--margin-distance-y);
    right: calc(100% - var(--margin-distance-x) - var(--angle-size));
}

.advanced-border-enabled-yes
    > .advanced-border-overlay
    > .advanced-border-left-line {
    width: 1px;
    left: var(--margin-distance-x);
    top: calc(var(--margin-distance-y) + var(--angle-size));
    bottom: calc(var(--margin-distance-y) + var(--angle-size));
}

.border-layout-simple.advanced-border-enabled-yes
    > .advanced-border-overlay
    > .advanced-border-top-left-line {
    right: 50%;
}

.border-layout-simple.advanced-border-enabled-yes
    > .advanced-border-overlay
    > .advanced-border-top-right-line {
    left: 50%;
}

/* Make sure content stays on top */
.advanced-border-enabled-yes > .e-con-inner {
    position: relative;
    z-index: 1;
}