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

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

nz-card {
    width: 100%;

    ::ng-deep .ant-card-head {
        min-height: auto;
        background: $brand;

        .ant-card-head-title {
            padding: $general_padding_1 0;
            color: $white;
        }
    }
}

.card-content {
    display: flex;
    flex-direction: column;
    gap: $general_padding_2;
}

.search-form {
    display: flex;
    align-items: center;
    gap: $general_padding_2;
    padding: $general_padding_2;
    background: $grey_color_translucent;
    border-radius: $border-radius;

    nz-form-label {
        margin: 0;
        padding: 0;
    }

    nz-input-group {
        max-width: 300px;
    }
}

.table-container {
    width: 100%;
    overflow: auto;
}

.empty-message {
    text-align: center;
    padding: $general_padding_2;
}

.user-row {
    background: $white;

    &.group-row {
        background: $grey_color_translucent;
    }
}

.actions-cell {
    display: flex;
    gap: $general_padding_1;
    justify-content: flex-end;
}

.table-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: $general_padding_2;
}

nz-select {
    width: 100%;
}
