@use 'design-system' as *;

.loggerOuter {
    min-height: 154px;
    height: 154px;
    max-height: 700px;
    resize: vertical;
    display: flex;
    flex-direction: column;
    margin-top: $spacing-size-4;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-primary);
    overflow: hidden;
}

.loggerHeader {
    padding: $spacing-size-2;
    font-family: var(--text-monospace-font-family);
    font-size: var(--text-fs-xs);
    font-weight: var(--text-semibold);
    border-bottom: 1px solid var(--color-border-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;

    button {
        padding: 0.08em 0.5em 0;
    }
}

.loggerPre {
    margin: 0 0 -1px; // -1px bottom margin prevents double border
    padding: 0;
    font-size: var(--text-fs-xs);
    border-radius: 0;
    border: none;
    overflow-y: auto;
    overflow-x: hidden;

    #{$selector-darkmode} & {
        background-color: var(--color-gray-900);
        color: var(--color-text-secondary);
    }
}

.logItem,
.placeholder {
    display: flex;
    flex-direction: row;
    gap: $spacing-size-2;
    padding: $spacing-size-2;
    border-bottom: 1px solid var(--color-border-secondary);

    &:nth-child(odd) {
        background-color: color-mix(in srgb, var(--color-bg-primary) 66.66%, transparent);
    }
}

.count {
    min-width: $spacing-size-4;
    height: $spacing-size-4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-fs-2xs);
    border-radius: $spacing-size-2;
    background-color: var(--color-gray-200);
    color: var(--color-gray-800);
    opacity: 1;
    flex-shrink: 0;
    font-weight: 600;
    padding-left: 4px;
    padding-right: 4px;

    #{$selector-darkmode} & {
        background-color: var(--color-gray-600);
        color: var(--color-gray-300);
    }
}

.dataItem {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: $spacing-size-2;
    white-space: pre-wrap;
    line-height: var(--text-lh-base);
}

.type-null,
.type-undefined {
    color: var(--color-code-keyword);
}

.type-string {
    color: var(--color-code-string);
}

.type-symbol,
.type-boolean,
.type-number,
.type-nan,
.type-date {
    color: var(--color-code-symbol);
}

.type-regex {
    color: var(--color-code-property);
}

:global {
    .react-json-view {
        font-size: 12px !important;

        .variable-value {
            text-transform: lowercase;

            span:not(.string-value) {
                text-transform: lowercase;
            }

            .string-value {
                text-transform: none;
            }

            div {
                font-size: 12px !important;
                font-weight: 500 !important;
            }
        }

        .node-ellipsis {
            font-size: 12px !important;
            font-weight: 500 !important;
        }

        span {
            font-weight: 500 !important;
        }

        .brace-row {
            span {
                font-weight: 500 !important;
            }
        }

        .collapsed-icon {
            svg {
                fill: rgb(88, 110, 117);
            }
        }
    }
}

.clearButton {
    font-family: var(--text-monospace-font-family);
    color: var(--color-button-secondary-fg);
}
