
@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;
}

.search-box {
    padding: $general_padding_1;
    
    input {
        width: 200px;
    }
}

nz-table {
    ::ng-deep {
        th {
            white-space: nowrap;
            color: $font-color-primary;
            font-weight: $semi-bold;
            
            i {
                margin-left: $general_padding_1;
                cursor: pointer;
                color: $font-color-secondary;
                
                &:hover {
                    color: $primary-color;
                }
            }
        }
        
        td {
            vertical-align: top;
            color: $font-color-primary;
            
            .online {
                color: $green-color;
                font-weight: $semi-bold;
            }
        }
    }
}

.description-cell {
    max-width: 300px;
    word-wrap: break-word;
    
    nz-divider {
        margin: $general_padding_1 0;
    }
    
    .mdm-info {
        color: $font-color-secondary;
        font-size: $general_font_size_1;
        
        nz-tag {
            margin-bottom: $general_padding_1;
        }
    }
}

.offline-cache-cell {
    display: flex;
    align-items: center;
    gap: $general_padding_1;
    
    button {
        padding: 0;
        height: auto;
        
        i {
            font-size: $general_font_size_3;
        }
    }
}

.location-cell {
    display: flex;
    flex-direction: column;
    gap: $general_padding_1;
    
    span {
        font-family: monospace;
        font-size: $general_font_size_1;
    }
    
    a {
        display: flex;
        align-items: center;
        gap: $general_padding_1;
        color: $primary-color;
        font-size: $general_font_size_1;
        
        i {
            font-size: $general_font_size_2;
        }
    }
}

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

button[nzType="text"] {
    i {
        font-size: $general_font_size_3;
    }
    
    &:hover {
        background-color: $red-color-translucent;
    }
}