@import '../../index';
@import '../../../../mixins/index';

@ps-panel-prefix-cls: ~"@{polestar-prefix}-panel";

.@{ps-panel-prefix-cls} {
    display: flex;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100%;
    flex-direction: column;
    border-top: @modal-border-width-base @modal-border-style-base @modal-border-color;
    border-bottom: @modal-border-width-base @modal-border-style-base @modal-border-color;
    &-header {
        display: flex;
        flex-grow: 1;
        flex-shrink: 1;
        // flex-basis: 100%;
        flex-direction: row;
        padding: 0 10px;
        background: @modal-header-bg;
        border-bottom: @modal-border-width-base @modal-border-style-base @modal-border-color;
        .@{ps-panel-prefix-cls}-title {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-grow: 1;
            i {
                margin: 0 5px 0 0;
            }
        }
        .@{ps-panel-prefix-cls}-action-items {
            display: flex;
            justify-content: flex-end;
            flex-grow: 1;
            align-items: center;
            margin: 5px 0;
            .@{ps-panel-prefix-cls}-custom-buttons {
                display: flex;
                .@{ps-button-prefix-cls}-container {
                    .@{ps-button-prefix-cls} {
                        font-size: @font-size-sm;
                        padding: 0 10px;
                        margin: 0 10px 0 0;
                        height: 24px;
                        border: @border-width-base @border-style-base @gray-3;
                        background: @white;
                    }
                }
            }
            .@{ps-button-prefix-cls}-container {
                .@{ps-button-prefix-cls} {
                    padding: 0 10px;
                    height: 24px;
                    border: unset;
                    background: unset;
                }
            }
        }
    }
    &-content {
        display: flex;
        padding: 10px;
    }
    &-footer {
        display: flex;
        padding: 0 10px;
    }
}