$type-colors: (
    string: #2196f3,
    number: #e3008c,
    boolean: #ff9800,
    date: #32aedf,
    array: var(--text-color),
    object: var(--text-color),
    function: var(--text-color),
    "null": #fff,
    undefined: #fff,
);

.ngx-json-viewer {
    font-family: monospace;
    font-size: 1em;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;

    .segment {
        padding: 2px;
        margin: 1px 1px 1px 12px;

        .segment-main {
            word-wrap: break-word;

            .toggler {
                position: absolute;
                margin-left: -14px;
                margin-top: 3px;
                font-size: 0.8em;
                line-height: 1.2em;
                vertical-align: middle;
                color: var(--accent-color);

                &::after {
                    display: inline-block;
                    content: "►";
                    transition: transform 0.1s ease-in;
                }
            }

            .segment-key {
                color: var(--text-color);
                cursor: pointer;

                .icon {
                    font-size: 10px;
                    color: var(--text-color);
                }
            }

            .segment-separator {
                color: var(--text-color-bold);
            }

            .segment-value {
                color: #000;
            }
        }

        .children {
            margin-left: 12px;
        }
    }

    @each $type, $color in $type-colors {
        .segment-type-#{$type} > .segment-main > .segment-value {
            color: $color;
        }
    }

    // special cases need highlightted
    .segment-type-null > .segment-main > .segment-value {
        background-color: red;
    }
    .segment-type-undefined > .segment-main {
        & > .segment-key {
            color: #999;
        }
        & > .segment-value {
            background-color: #999;
        }
    }
    .segment-type-object > .segment-main,
    .segment-type-array > .segment-main {
        white-space: nowrap;
    }

    .expanded > .toggler::after {
        transform: rotate(90deg);
    }

    .expandable,
    .expandable > .toggler {
        cursor: pointer;
    }
}
