@import "../../../../../assets/css/abstracts/custom-variables.scss";

.config-data {
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-all;
    font-family: monospace;

    &.config-editable {
      border: 1px solid $gray-300;
    }
}
.loading-message {
    font-style: italic;
    color: $gray-900;
}

.table {
    display: table;
    border: 1px solid $gray-300;

    .thead {
        display: table-header-group;
    }

    .tbody {
        display: table-row-group;
    }

    & > .tr {
        display: table-row;
        visibility: visible;
        opacity: 1;
        transition: opacity 600ms, visibility 600ms;

        &:nth-of-type(2n+1) {
            background-color: $gray-100;
        }

        &.new-item {
            color: $white;

            ion-icon {
                color: $white;
            }
        }

        &.deleted-item {
            color: $white;

            ion-icon {
                color: $white;
            }
        }

        & > .td, .th {
            padding: 5px;
            line-height: 1.42857143;
            vertical-align: top;
        }

        .td {
            border-top: 1px solid $gray-300;
            line-height: 2.31;

            * {
                vertical-align: middle;
            }
        }

        &.hidden-row {
            height: 0;
            max-height: 0;
            opacity: 0;
            visibility: hidden;
            -webkit-transition: opacity 600ms, visibility 600ms;
            transition: opacity 600ms, visibility 600ms;

            * {
                display: none;
            }
        }
    }

    .tr:nth-child(2) .td {
        border-top: none;
    }

    .td, .th {
        display: table-cell;
    }

    .th {
        text-align: center;
        font-weight: bold;
        border-bottom: 1px solid $gray-300;

    }

    .hidden-item {
        color: $gray-700;
        font-style: italic;
    }

}

.btn-json-edit {
    margin: 10px 0;
}

.config-type-select {
    min-width: 100px;
}

//json Editor styles
div.jsoneditor-menu {
    background-color: $gray-500;
    border-bottom: $gray-300;
}

div.jsoneditor {
    border: 1px solid $gray-300;
}

.jsoneditor-tree {
    background-color: $white;
}

.add-new-config-pre-edit {
    font-style: italic;
}

.add-new-config-edit {
    padding-left: 5px;
    background: $white;
    border: 1px solid $gray-300;
}
