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

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

.ldap-form {
    display: flex;
    flex-direction: column;
    gap: $general_padding_2;
}

.ldap-item {
    display: flex;
    flex-direction: column;
    gap: $general_padding_1;
    padding: $general_padding_2;
    background: $grey_color_translucent;
    border-radius: $border-radius;

    .row {
        display: flex;
        gap: $general_padding_2;
        align-items: flex-start;

        &.switches {
            justify-content: space-between;

            .switch-item {
                display: flex;
                align-items: center;
                gap: $general_padding_1;
            }
        }

        > * {
            flex: 1;
        }

        .delete-button {
            flex: 0 0 auto;
        }
    }
}

.form-help-text {
    color: rgba(0, 0, 0, 0.45);
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

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