@use "../../styles/abstracts" as *;

.logger {
	position: fixed;
	bottom: var(--dev-panel-spacing-xl);
	left: var(--dev-panel-spacing-xl);
	width: 400px;
	max-width: calc(100vw - var(--dev-panel-spacing-4xl));
	background: var(--dev-panel-foreground-color);
	border: 1px solid var(--dev-panel-border-color);
	border-radius: var(--dev-panel-border-radius-xl);
	box-shadow: var(--dev-panel-shadow);
	z-index: var(--dev-panel-z-index-toast);
	font-family: var(--dev-panel-font-family);
	overflow: hidden;
	transition: var(--dev-panel-transition-slow);

	&.collapsed {
		height: var(--dev-panel-header-height);
		overflow: hidden;
	}
}

.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--dev-panel-spacing-md) var(--dev-panel-spacing-lg);
	background: var(--dev-panel-foreground-color);
	border-bottom: 1px solid var(--dev-panel-border-color);
	user-select: none;
	transition: var(--dev-panel-transition);
	min-height: var(--dev-panel-header-height);
	cursor: pointer;

	&:hover {
		background: var(--dev-panel-surface-color-hover);
	}
}

.title {
	display: flex;
	align-items: center;
	gap: var(--dev-panel-spacing-md);
	font-weight: var(--dev-panel-font-weight-semibold);
	font-size: var(--dev-panel-font-size-sm);
	color: var(--dev-panel-text-color);
	margin: 0;
}

.controls {
	display: flex;
	align-items: center;
	gap: var(--dev-panel-spacing-sm);
}

.toggleButton {
	background: none;
	border: none;
	cursor: pointer;
	padding: var(--dev-panel-spacing-sm);
	border-radius: var(--dev-panel-border-radius-md);
	color: var(--dev-panel-text-color-muted);
	font-size: var(--dev-panel-font-size-md);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--dev-panel-transition);
	min-width: 24px;
	min-height: 24px;

	&:hover {
		background: var(--dev-panel-surface-color-hover);
		color: var(--dev-panel-text-color);
	}

	&:active {
		transform: scale(0.95);
	}

	&:focus {
		outline: 2px solid var(--dev-panel-accent-color);
		outline-offset: 2px;
	}

	&:focus:not(:focus-visible) {
		outline: none;
	}

	> svg {
		display: block;
		height: 1rem;
		transition: transform ease 200ms;

		&.collapsed {
			transform: rotate(180deg);
		}

		path {
			fill: currentColor;
		}
	}
}

.closeButton {
	background: none;
	border: none;
	cursor: pointer;
	padding: var(--dev-panel-spacing-sm);
	border-radius: var(--dev-panel-border-radius-md);
	color: var(--dev-panel-error-color);
	font-size: var(--dev-panel-font-size-sm);
	font-weight: var(--dev-panel-font-weight-bold);
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	min-height: 24px;
	transition: var(--dev-panel-transition);

	&:hover {
		background: color-mix(in srgb, var(--dev-panel-error-color) 10%, transparent);
		color: var(--dev-panel-error-color-hover);
	}

	&:active {
		transform: scale(0.95);
	}

	&:focus {
		outline: 2px solid var(--dev-panel-error-color);
		outline-offset: 2px;
	}

	&:focus:not(:focus-visible) {
		outline: none;
	}
}

.content {
	@include scrollbar;

	padding: var(--dev-panel-spacing-lg);
	overflow: auto;
	max-height: calc(100vh - 200px);
	background: var(--dev-panel-background-color);
}

.jsonDisplay {
	font-family: "Monaco", "Menlo", "Ubuntu Mono", "Courier New", monospace;
	font-size: var(--dev-panel-font-size-xs);
	line-height: var(--dev-panel-line-height-relaxed);
	margin: 0;
	white-space: pre-wrap;
	word-break: break-all;
	color: var(--dev-panel-text-color);
	background: var(--dev-panel-input-background-color);
	padding: var(--dev-panel-spacing-md);
	border-radius: var(--dev-panel-border-radius);
	border: 1px solid var(--dev-panel-border-color);
}

.empty {
	color: var(--dev-panel-text-color-muted);
	font-style: italic;
	text-align: center;
	padding: var(--dev-panel-spacing-3xl);
	font-size: var(--dev-panel-font-size-sm);
}

.badge {
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--dev-panel-info-color);
	color: var(--dev-panel-text-color-on-accent);
	width: 18px;
	height: 18px;
	border-radius: var(--dev-panel-border-radius-full);
	font-size: var(--dev-panel-font-size-xs);
	font-weight: var(--dev-panel-font-weight-bold);

	&.updated {
		background: var(--dev-panel-success-color);
		animation: pulse 0.6s ease-in-out;
	}
}

@keyframes pulse {
	50% {
		box-shadow: 0 0 0 4px color-mix(in srgb, var(--dev-panel-success-color) 30%, transparent);
	}
}
