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

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

nz-card {
    background: $container-background-color;
    border-radius: $border-radius;
    box-shadow: $box-shadow;
}

nz-table {
    ::ng-deep {
        th {
            color: $font-color-primary;
            font-weight: $semi-bold;
            white-space: nowrap;
        }
        
        td {
            vertical-align: middle;
            
            .setting-name {
                color: $font-color-primary;
                font-weight: $semi-bold;
                cursor: help;
            }
        }
    }
}

nz-form-item {
    margin-bottom: 0;
    
    nz-form-control {
        width: 100%;
        max-width: 300px;
        
        ::ng-deep {
            .ant-form-item-control-input {
                min-height: auto;
            }
        }
    }
}

nz-switch {
    min-width: 60px;
}

.button-container {
    display: flex;
    gap: $general_padding_1;
    margin-top: $general_padding_2;
    padding-top: $general_padding_2;
    border-top: 1px solid $border-color;
    
    button {
        min-width: $general_button_min_width;
        
        &[nzType="primary"] {
            background-color: $primary-color;
            border-color: $primary-color;
            
            &:hover {
                background-color: lighten($primary-color, 10%);
                border-color: lighten($primary-color, 10%);
            }
        }
    }
}