@import "../ui.vars.less";

sc-panel {
    display: block;
    width: 100%;

    &[form-panel]{
        max-width: 645px;
    }

    &[center-form-panel]{
        max-width: 645px;
        margin: 0 auto;
    }
}

sc-panel, sc-panel-body {
    &[padding] {
        padding: 24px;
        @media screen and (max-width: @mobile){
            padding: 16px;
        }
    }
}

sc-panel-body {
    display: block;
    padding: 0px;
    margin: 0px;

    &[wrap] {
        flex-wrap: wrap;
    }

    &[table] {
        display: table;
    }
}

sc-panel-body > sc-panel-header {
    display: block;
    background-color: red;
    ::before{
        content: 'DOM error: sc-panel-body > sc-panel-header, they should be siblings.';
    }
}