@import "/UI/Core/Kit/Styles/UITokens.scss";

ItemPreviewDebugger {
	position: absolute;
	inset: 0;
	pointer-events: all;
    cursor: pointer;
	color: $ui-color-text;
	font-family: $ui-font-family;

	root {
		position: absolute;
		top: 64px;
		right: 24px;
		width: 580px;
		pointer-events: all;
		
	}

	.debug-shell {
		width: 100%;
		padding: 18px;
		flex-direction: column;
		gap: 16px;
		background-color: rgba( 10, 14, 18, 0.96 );
		border: 1px solid rgba( $ui-color-warning, 0.32 );
		border-radius: $ui-radius-lg;
		box-shadow: 0 18px 40px rgba( 0, 0, 0, 0.45 );
	}

	.debug-header,
	.weapon-identity,
	.preview-column,
	.framing-data,
	.empty-state {
		flex-direction: column;
	}

	.debug-header {
		gap: 4px;
	}

	.debug-heading,
	.weapon-selector,
	.preview-comparison,
	.framing-row,
	.debug-actions {
		flex-direction: row;
	}

	.debug-heading {
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}

	.debug-title {
		font-family: $ui-font-family-display;
		font-size: 22px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		color: white;
	}

	.debug-subtitle,
	.weapon-count,
	.weapon-path,
	.preview-size,
	.empty-state > label {
		font-size: 13px;
		color: $ui-color-text-muted;
	}

	.weapon-count {
		color: rgba( $ui-color-warning, 0.9 );
		white-space: nowrap;
	}

	.weapon-selector {
		align-items: stretch;
		gap: 10px;
	}

	.weapon-identity {
		min-width: 0;
		flex-grow: 1;
		justify-content: center;
		align-items: center;
		gap: 2px;
		padding: 8px 12px;
		background-color: rgba( 255, 255, 255, 0.035 );
		border: 1px solid rgba( 255, 255, 255, 0.08 );
		border-radius: $ui-radius-sm;
	}

	.weapon-name {
		font-family: $ui-font-family-display;
		font-size: 19px;
		font-weight: 700;
		color: white;
	}

	.weapon-path {
		max-width: 100%;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.preview-comparison {
		align-items: flex-start;
		justify-content: center;
		gap: 54px;
		padding: 16px;
		background-color: rgba( 0, 0, 0, 0.22 );
		border: 1px solid rgba( 255, 255, 255, 0.05 );
		border-radius: $ui-radius-md;
	}

	.preview-column {
		align-items: center;
		gap: 7px;
	}

	.preview-label {
		font-size: 12px;
		font-weight: 900;
		letter-spacing: 1px;
		text-transform: uppercase;
		color: rgba( 255, 255, 255, 0.76 );
	}

	.buy-menu-frame,
	.corpse-method-frame {
		width: 132px;
		height: 132px;
		min-width: 132px;
		min-height: 132px;
		overflow: hidden;
		align-items: center;
		justify-content: center;

		ItemPreviewImage {
			width: 100%;
			height: 100%;
		}
	}

	.buy-menu-frame {
		border-radius: 6px;
		border: 2px solid rgba( 132, 165, 199, 0.35 );
		background-color: rgba( 36, 74, 112, 0.1 );
	}

	.corpse-method-frame {
		border-radius: 4px;
		border: 2px solid rgba( 132, 165, 199, 0.45 );
		background-color: rgba( 24, 24, 24, 0.92 );
	}

	.preview-size {
		font-size: 11px;
		letter-spacing: 0.04em;
	}

	.framing-data {
		gap: 1px;
		border: 1px solid rgba( 255, 255, 255, 0.06 );
		border-radius: $ui-radius-sm;
		overflow: hidden;
	}

	.framing-row {
		min-height: 30px;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding: 5px 9px;
		background-color: rgba( 255, 255, 255, 0.025 );

		label {
			font-size: 12px;
			font-weight: 700;
			text-transform: uppercase;
			letter-spacing: 0.05em;
			color: $ui-color-text-muted;
		}

		span {
			font-size: 13px;
			color: white;
		}
	}

	.debug-actions {
		justify-content: flex-end;
		gap: 8px;
	}

	.tool-button {
		min-height: 34px;
		padding: 6px 12px;
		align-items: center;
		justify-content: center;
		font-family: $ui-font-family;
		font-size: 12px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: rgba( 255, 255, 255, 0.86 );
		background-color: rgba( 255, 255, 255, 0.055 );
		border: 1px solid rgba( 255, 255, 255, 0.12 );
		border-radius: $ui-radius-sm;
		transition: background-color $ui-transition-fast, border-color $ui-transition-fast;

		&:hover {
			background-color: rgba( $ui-color-warning, 0.12 );
			border-color: rgba( $ui-color-warning, 0.5 );
		}

		&:active {
			background-color: rgba( $ui-color-warning, 0.2 );
		}
	}

	.navigation-button {
		width: 82px;
		flex-shrink: 0;
	}

	.empty-state {
		align-items: center;
		gap: 12px;
		padding: 24px;
		background-color: rgba( 0, 0, 0, 0.2 );
		border-radius: $ui-radius-md;
	}
}