.layout {
    /* Content 区域 */
    background-color: rgba(255, 238, 0, 0.05) !important;
    position: relative !important;
}

/* Padding 区域检测 */
.layout {
    /* 检测直接的padding值 */
    &[style*="padding"],
    /* 检测padding变量 */
    &[style*="--p"],
    &[style*="--pt"],
    &[style*="--pr"],
    &[style*="--pb"],
    &[style*="--pl"] {
        background-clip: content-box !important;
        box-shadow: inset 0 0 0 1000px rgba(255, 238, 0, 0.05) !important;
    }
}

/* Border 区域检测 */
.layout {
    /* 检测直接的border值 */
    &[style*="border"],
    /* 检测border变量 */
    &[style*="--b"],
    &[style*="--bt"],
    &[style*="--br"],
    &[style*="--bb"],
    &[style*="--bl"] {
        border-style: dashed !important;
        border-color: rgba(0, 0, 255, 0.4) !important;
    }
}

/* Margin 区域检测 */
.layout {
    /* 检测直接的margin值 */
    &[style*="margin"],
    /* 检测margin变量 */
    &[style*="--m"],
    &[style*="--mt"],
    &[style*="--mr"],
    &[style*="--mb"],
    &[style*="--ml"] {
        outline: 1px dashed rgba(255, 238, 0, 0.5) !important;
        outline-offset: -1px !important;
    }
}

/* swiftUIStyle */

.text {

    width: var(--w, auto);
    height: var(--h, auto);

    min-width: var(--min-w, var(--w, auto));
    max-width: var(--max-w, var(--w, auto));

    min-height: var(--min-h, var(--h, auto));
    max-height: var(--max-h, var(--h, auto));

    text-align: var(--text-align, left);

    padding: var(--pt, 0px) var(--pr, 0px) var(--pb, 0px) var(--pl, 0px);

}

.hstack {

    width: var(--w, auto);
    height: var(--h, auto);

    min-width: var(--min-w, var(--w, auto));
    max-width: var(--max-w, var(--w, auto));

    min-height: var(--min-h, var(--h, auto));
    max-height: var(--max-h, var(--h, auto));

    display: flex;
    flex-direction: row;
    justify-content: var(--h-align, center);
    align-items: var(--v-align, center);

    gap: var(--spacing, 0px);

    padding: var(--pt, 0px) var(--pr, 0px) var(--pb, 0px) var(--pl, 0px);
    margin: var(--mt, 0px) var(--mr, 0px) var(--mb, 0px) var(--ml, 0px);

}

.vstack {

    width: var(--w, auto);
    height: var(--h, auto);

    min-width: var(--min-w, var(--w, auto));
    max-width: var(--max-w, var(--w, auto));

    min-height: var(--min-h, var(--h, auto));
    max-height: var(--max-h, var(--h, auto));

    display: flex;
    flex-direction: column;
    justify-content: var(--v-align, center);
    align-items: var(--h-align, center);

    gap: var(--spacing, 0px);

    padding: var(--pt, 0px) var(--pr, 0px) var(--pb, 0px) var(--pl, 0px);
    margin: var(--mt, 0px) var(--mr, 0px) var(--mb, 0px) var(--ml, 0px);


}

.zstack {

    width: var(--w, auto);
    height: var(--h, auto);

    min-width: var(--min-w, var(--w, auto));
    max-width: var(--max-w, var(--w, auto));

    min-height: var(--min-h, var(--h, auto));
    max-height: var(--max-h, var(--h, auto));

    position: relative;
    margin: var(--mt, 0px) var(--mr, 0px) var(--mb, 0px) var(--ml, 0px);


}

.zstack > * {
    position: absolute;
    top: var(--v-percent, 50%);
    left: var(--h-percent, 50%);
    transform: translate(var(--h-anchor, calc(var(--h-percent, 50%) * -1)), var(--v-anchor, calc(var(--v-percent, 50%) * -1)));
}

.image {

    width: var(--w, auto);
    height: var(--h, auto);

    object-fit: var(--display-mode, contain);

    padding: var(--pt, 0px) var(--pr, 0px) var(--pb, 0px) var(--pl, 0px);
    margin: var(--mt, 0px) var(--mr, 0px) var(--mb, 0px) var(--ml, 0px);
}

@media (max-width: 850px) {

    .text {

        width: var(--alt-w, var(--w, auto));
        height: var(--alt-h, var(--h, auto));
    
        min-width: var(--alt-min-w, var(--min-w, var(--alt-w, var(--w, auto))));
        max-width: var(--alt-max-w, var(--max-w, var(--alt-w, var(--w, auto))));
    
        min-height: var(--alt-min-h, var(--min-h, var(--alt-h, var(--h, auto))));
        max-height: var(--alt-max-h, var(--max-h, var(--alt-h, var(--h, auto))));
    
        text-align: var(--alt-text-align, var(--text-align, left));

        padding: var(--alt-pt, var(--pt, 0px)) var(--alt-pr, var(--pr, 0px)) var(--alt-pb, var(--pb, 0px)) var(--alt-pl, var(--pl, 0px));
        
    
    }

    .hstack {

        width: var(--alt-w, var(--w, auto));
        height: var(--alt-h, var(--h, auto));
    
        min-width: var(--alt-min-w, var(--min-w, var(--alt-w, var(--w, auto))));
        max-width: var(--alt-max-w, var(--max-w, var(--alt-w, var(--w, auto))));
    
        min-height: var(--alt-min-h, var(--min-h, var(--alt-h, var(--h, auto))));
        max-height: var(--alt-max-h, var(--max-h, var(--alt-h, var(--h, auto))));
    
        display: flex;
        flex-direction: var(--alt-direction, row);
        justify-content: var(--alt-h-align, var(--h-align, center));
        align-items: var(--alt-v-align, var(--v-align, center));
    
        gap: var(--alt-spacing, var(--spacing, 0px));
    
        padding: var(--alt-pt, var(--pt, 0px)) var(--alt-pr, var(--pr, 0px)) var(--alt-pb, var(--pb, 0px)) var(--alt-pl, var(--pl, 0px));
        margin: var(--alt-mt, var(--mt, 0px)) var(--alt-mr, var(--mr, 0px)) var(--alt-mb, var(--mb, 0px)) var(--alt-ml, var(--ml, 0px));
    
    }

    .vstack {

        width: var(--alt-w, var(--w, auto));
        height: var(--alt-h, var(--h, auto));
    
        min-width: var(--alt-min-w, var(--min-w, var(--alt-w, var(--w, auto))));
        max-width: var(--alt-max-w, var(--max-w, var(--alt-w, var(--w, auto))));
    
        min-height: var(--alt-min-h, var(--min-h, var(--alt-h, var(--h, auto))));
        max-height: var(--alt-max-h, var(--max-h, var(--alt-h, var(--h, auto))));
    
        display: flex;
        flex-direction: var(--alt-direction, column);
        justify-content: var(--alt-v-align, var(--v-align, center));
        align-items: var(--alt-h-align, var(--h-align, center));
    
        gap: var(--alt-spacing, var(--spacing, 0px));
    
        padding: var(--alt-pt, var(--pt, 0px)) var(--alt-pr, var(--pr, 0px)) var(--alt-pb, var(--pb, 0px)) var(--alt-pl, var(--pl, 0px));
        margin: var(--alt-mt, var(--mt, 0px)) var(--alt-mr, var(--mr, 0px)) var(--alt-mb, var(--mb, 0px)) var(--alt-ml, var(--ml, 0px));
    
    }

    .zstack {

        width: var(--alt-w, var(--w, auto));
        height: var(--alt-h, var(--h, auto));
    
        min-width: var(--alt-min-w, var(--min-w, var(--alt-w, var(--w, auto))));
        max-width: var(--alt-max-w, var(--max-w, var(--alt-w, var(--w, auto))));
    
        min-height: var(--alt-min-h, var(--min-h, var(--alt-h, var(--h, auto))));
        max-height: var(--alt-max-h, var(--max-h, var(--alt-h, var(--h, auto))));
    
        position: relative;
        margin: var(--alt-mt, var(--mt, 0px)) var(--alt-mr, var(--mr, 0px)) var(--alt-mb, var(--mb, 0px)) var(--alt-ml, var(--ml, 0px));
    
    }

    .zstack > * {
        position: absolute;
        top: var(--alt-v-percent, var(--v-percent, 50%));
        left: var(--alt-h-percent, var(--h-percent, 50%));
        transform: translate(var(--alt-h-anchor, var(--h-anchor, calc(var(--h-percent, 50%)) * -1)), var(--alt-v-anchor, var(--v-anchor, calc(var(--v-percent, 50%)) * -1)));
    }

    .image {

        width: var(--alt-w, var(--w, auto));
        height: var(--alt-h, var(--h, auto));
    
        min-width: var(--alt-min-w, var(--min-w, var(--alt-w, var(--w, auto))));
        max-width: var(--alt-max-w, var(--max-w, var(--alt-w, var(--w, auto))));
    
        min-height: var(--alt-min-h, var(--min-h, var(--alt-h, var(--h, auto))));
        max-height: var(--alt-max-h, var(--max-h, var(--alt-h, var(--h, auto))));
    
        object-fit: var(--display-mode, contain);
    
        padding: var(--alt-pt, var(--pt, 0px)) var(--alt-pr, var(--pr, 0px)) var(--alt-pb, var(--pb, 0px)) var(--alt-pl, var(--pl, 0px));
        margin: var(--alt-mt, var(--mt, 0px)) var(--alt-mr, var(--mr, 0px)) var(--alt-mb, var(--mb, 0px)) var(--alt-ml, var(--ml, 0px));
    }
}