@use "@gloria/base/_mixins.scss" as *;

.c-fake-devtools {
	margin: var(--spacing-4) 0 var(--spacing-16);

	&:last-child {
		margin-bottom: 0;
	}

	&__logs {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-2);
		font-size: var(--font-size-sm);
		max-height: 400px;
		overflow-y: auto;
		padding: var(--spacing-2);

		@include scrollbar;

		&:not(:empty) + .c-fake-devtools__skeleton {
			display: none;
		}
	}

	&__log {
		border-radius: var(--radius-1);
		padding: var(--spacing-2) var(--spacing-4);
		line-height: 1.4;
		display: flex;
		align-items: flex-start;
		gap: var(--spacing-2);

		&:first-child {
			margin-top: var(--spacing-2);
		}

		&--info {
			background-color: var(--color-info-100);
			color: var(--color-info-700);
			border-left: 3px solid var(--color-info-500);

			.c-fake-devtools__log-icon {
				color: var(--color-info-600);
			}
		}

		&--warning {
			background-color: var(--color-warning-100);
			color: var(--color-warning-700);
			border-left: 3px solid var(--color-warning-500);

			.c-fake-devtools__log-icon {
				color: var(--color-warning-600);
			}
		}

		&--error {
			background-color: var(--color-error-50);
			color: var(--color-error-700);
			border-left: 3px solid var(--color-error-500);

			.c-fake-devtools__log-icon {
				color: var(--color-error-600);
			}
		}

		&-icon {
			position: relative;
			top: 1.5px;
			flex-shrink: 0;
			font-size: var(--font-size-base);
		}

		&-content {
			flex: 1;
			white-space: break-spaces;
    		word-break: break-all;
		}

		&-text {
			&--error {
				color: var(--color-error-700);
				font-weight: bold;
			}

			&--warning {
				color: var(--color-warning-700);
				font-weight: bold;
			}

			&--bold {
				font-weight: bold;
			}

			&--default {
				font-style: italic;
			}
		}
	}

	&__link {
		color: rgba(0, 0, 0, 0.6);
		text-decoration: underline;
		word-break: break-all;
		cursor: pointer;

		&:hover {
			color: rgba(0, 0, 0, 0.8);
		}
	}
}

.c-log-text-truncator {
	display: inline;
	margin-right: var(--spacing-3);

	&__expand-button {
		color: var(--color-primary-600);
		text-decoration: underline;
		cursor: pointer;
		font-size: inherit;
		background: none;
		border: none;
		padding: 0;
		margin: 0;

		&:hover {
			color: var(--color-primary-700);
		}

		&:focus {
			outline: 2px solid var(--color-primary-300);
			outline-offset: 1px;
		}
	}
}

object-viewer {
	display:contents;
}

.c-object-viewer {
	display: inline-block;
	margin: 0 var(--spacing-4);
	vertical-align: top;
	font-family: var(--font-family-monospace);
	font-size: 0.78rem;
	cursor: pointer;

	&__object, &__array {
		margin: var(--spacing-1) 0;
	}

	&__property {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: flex-start;
		gap: var(--spacing-1);
		padding: var(--spacing-1) 0;
	}

	&__preview {
		color: var(--color-gray-800);
		font-style: italic;
	}

	&__toggle {
		display: inline-block;
		width: 12px;
		color: var(--color-secondary-700);
		cursor: pointer;
		user-select: none;

		&:before {
			content: '►';
			font-size: 10px;
		}

		&--expanded:before {
			content: '▼';
		}
	}

	&__key {
		color: var(--color-secondary-700);
		margin-right: 4px;

		&:after {
			content: ": ";
		}
	}

	&__content {
		padding-left: var(--spacing-8);
		grid-column: 1 / -1;

		&--hidden {
			display: none;
		}
	}

	&__brace, &__array-bracket {
		color: var(--color-secondary-700);
	}

	&__string {
		color: var(--color-green-800);
	}

	&__number {
		color: var(--color-blue-800);
	}

	&__boolean {
		color: var(--color-blue-800);
	}

	&__null, &__undefined {
		color: var(--color-gray-800);
		font-style: italic;
	}

	&__function {
		color: var(--color-secondary-700);
		font-style: italic;
	}

	&__date {
		color: var(--color-secondary-700);
		font-style: italic;
	}
}
