
@import "@synerty/peek-plugin-base-js/src/styles/_variables";
@import "src/variables";

:host {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.settings-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: $container-background-color;
    border-radius: $border-radius;
    padding: $general_padding_2;
    
    .table-container {
        flex: 1;
        width: 100%;
        overflow: auto;
        
        ::ng-deep {
            .ant-table-wrapper {
                .ant-table {
                    background-color: $container-background-color;
                    
                    th {
                        background-color: $background-color;
                        color: $font-color-primary;
                        font-weight: $semi-bold;
                    }
                    
                    td {
                        vertical-align: middle;
                    }
                }
                
                .ant-input-number {
                    width: 120px;
                }
                
                .ant-input {
                    width: 100%;
                    max-width: 300px;
                }
            }
        }
    }
    
    .button-container {
        display: flex;
        gap: $general_padding_1;
        margin-top: $general_margin_2;
        justify-content: flex-start;
        
        button {
            min-width: $general_button_min_width;
            height: $button-height;
            
            &:not(:last-child) {
                margin-right: $general_padding_1;
            }
        }
    }
}

nz-spin {
    height: 100%;
    
    ::ng-deep .ant-spin-container {
        height: 100%;
    }
}