@import "/ui/styles/_theme.scss";

MenuMapCard {
	flex-direction: row;
	align-items: center;
	gap: 18px;
	width: 100%;
	min-height: 150px;
	padding: 22px 26px;
	background-color: $panel-glass-strong;
	border: 1px solid $border;
	border-left: 3px solid $primary;
	position: relative;
	overflow: hidden;
}

MenuMapCard {
	.map-bg {
		position: absolute;
		top: 0; right: 0; bottom: 0; left: 0;
		background-size: cover;
		background-position: center;
		opacity: 0.85;
		z-index: 0;
	}

	.map-fade {
		position: absolute;
		top: 0; right: 0; bottom: 0; left: 0;
		background-image: linear-gradient(
			90deg,
			rgba($surface-deep, 0.95) 0%,
			rgba($surface-deep, 0.50) 35%,
			rgba($surface-deep, 0.50) 65%,
			rgba($surface-deep, 0.95) 100%
		);
		z-index: 0;
	}

	.map-body {
		flex-direction: column;
		gap: 6px;
		flex-grow: 1;
		z-index: 1;
	}

	.map-section-label {
		font-family: $font-primary;
		font-size: 16px;
		font-weight: 800;
		letter-spacing: 3px;
		text-transform: uppercase;
		color: $primary;
	}

	.map-title-row {
		flex-direction: row;
		align-items: center;
		gap: 14px;
	}

	.map-title {
		font-family: $font-primary;
		font-size: 28px;
		font-weight: 700;
		letter-spacing: 3px;
		text-transform: uppercase;
		color: $text;
		text-shadow: $text-shadow;
	}

	.map-chip {
		flex-direction: row;
		align-items: center;
		gap: 6px;
		padding: 4px 10px;
		background-color: rgba(33, 33, 35, 0.55);
		border: 1px solid transparent;

		.icon { color: $text-dim; font-size: 18px; }
		.map-chip-label {
			font-family: $font-primary;
			font-size: 13px;
			font-weight: 700;
			letter-spacing: 2px;
			text-transform: uppercase;
			color: $text;
		}

		&.tone-primary {
			border-color: $primary-line;
			background-color: $primary-soft;
			.icon { color: $accent; }
		}

		&.tone-confirm {
			border-color: $success-line;
			background-color: $success-soft;
			.icon { color: $success; }
		}

		&.tone-danger {
			border-color: $danger-line;
			background-color: $danger-soft;
			.icon { color: $danger; }
		}
	}

	.map-desc {
		font-family: $font-secondary;
		font-size: 15px;
		color: $text;
		opacity: 0.85;
		max-width: 720px;
	}

	.map-action {
		pointer-events: all;
		cursor: pointer;
		flex-direction: row;
		align-items: center;
		gap: 8px;
		padding: 12px 18px;
		background-color: $panel-glass;
		border: 1px solid $border;
		z-index: 1;
		flex-shrink: 0;
		transition: background-color 0.12s ease-out, border-color 0.12s ease-out;

		.icon { color: $text-dim; }

		.map-action-label {
			font-family: $font-primary;
			font-size: 18px;
			font-weight: 700;
			letter-spacing: 2px;
			text-transform: uppercase;
			color: $text-dim;
		}

		&:hover {
			background-color: $secondary-soft;
			border-color: $text-dim;
			.icon, .map-action-label { color: $text; }
		}
	}
}