@import './variables.css';
@import './variables-dark.css' ( prefers-color-scheme: dark );
@import './reset.css';
@import './prism.css';
@import './prism-dracula.css';

body {
    margin: .5rem;
    color: var(--text-color);
    background-color: var(--background-color);
}

a, a:hover {
    color: var(--link-color);
}

:matches( ul, ol, dl ) {
    margin: 0 0 1rem;
}

:matches( ul, ol, dl ) :matches( ul, ol, dl ) {
    margin-bottom: 0;
}

#input {
    width: 100%;
    min-height: 200px;
    color: var(--text-color);
    background-color: var(--background-color);
}

#output {
    display: block;
    white-space: pre-wrap;
}

.value-type.type-null {
    --type: 'null';
}

.value-type.type-object {
    --type: 'object';
}

.value-type.type-reference {
    --type: 'reference';
}

.value-type.type-string {
    --type: 'string';
}

.value-type.type-array {
    --type: 'array';
}

.value-type.type-boolean {
    --type: 'boolean';
}

.value-type.type-float {
    --type: 'float';
}

.value-type.type-integer {
    --type: 'integer';
}

.value-type:not( .type-object ):not( .type-array ) {
    display: inline-block;
}

.value-type:not( .type-object ):not( .type-array )::before {
    content: var(--type);
}

.value-type.type-object, .value-type.type-array {
    display: contents;
}

.value-type.type-object:not( [open] ) > :not( summary ),
.value-type.type-array:not( [open] ) > :not( summary ) {
    display: none;
}

.value-type.type-object:not( [open] ) > summary::after,
.value-type.type-array:not( [open] ) > summary::after {
    content: '▶';
}

.value-type.type-object[open] > summary::after,
.value-type.type-array[open] > summary::after {
    content: '🔽';
}

.value-type.type-object > summary, .value-type.type-array > summary {
    display: inline-block;
    display: inline;
}

.value-type.type-object > summary::before,
.value-type.type-array > summary::before {
    content: var(--type) '( ' var(--count) ' )';
}

.value-type.type-object > .value, .value-type.type-array > .value {
    display: block;
    margin-left: 2rem;
}

.value-type.type-object dl, .value-type.type-array dl {
}

.value-type.type-object dt, .value-type.type-object dd,
.value-type.type-array dt, .value-type.type-array dd {
    display: inline;
    margin: 0;
}

.value-type.type-object dt .value-type::before,
.value-type.type-array dt .value-type::before {
    content: unset;
}

.value-type.type-object dt .value-type::after,
.value-type.type-array dt .value-type::after {
    content: ':';
}

.value-type.type-object dt .value-type.access-private::before,
.value-type.type-array dt .value-type.access-private::before {
    content: 'private ';
}

.value-type.type-object dt .value-type.access-protected::before,
.value-type.type-array dt .value-type.access-protected::before {
    content: 'protected ';
}

.value-type.type-object dt, .value-type.type-array dt {
    margin-right: 1ex;
}

.value-type > .value {
    display: inline-block;
}

:not( dt ) > .value-type:not( .type-object ):not( .type-array ) .value::before {
    content: '( ';
}

:not( dt ) > .value-type:not( .type-object ):not( .type-array ) .value::after {
    content: ' )';
}

:not( dt ) > .value-type:not( .type-object ):not( .type-array ).type-string .value::before {
    content: '( "';
}

:not( dt ) > .value-type:not( .type-object ):not( .type-array ).type-string .value::after {
    content: '" )';
}