@use "../kit-deps" as *;
@use "typography" as *;

.card {
	position: relative;
	max-width: 340px;
	width: 100%;
	overflow: hidden;
	@include hard_panel($color-text-light);
	transition-duration: $motion-base;
	transition-timing-function: $motion-ease;
	transition-property: border-color, background, box-shadow, transform;

	&::after {
		content: "";
		position: absolute;
		inset: 0 auto 0 0;
		width: 34%;
		background: linear-gradient(90deg, transparent, rgba($color-text-light, 0.08), transparent);
		opacity: 0;
		pointer-events: none;
		transform: translateX(-120%);
	}

	.card-title {
		color: $color-black;
		background: $color-text-light;
		padding: $space-2 $space-3;
		font-weight: $font-weight-bold;
		text-transform: uppercase;
	}

	.card-content {
		padding: $space-4;
		height: 100%;

		.card-thumb {
			display: block;
			width: min(68%, 190px);
			margin: $space-5 auto $space-6;
			transition-duration: $motion-base;
			transition-timing-function: $motion-ease;
			transition-property: transform, filter;
		}

		p {
			margin-top: $space-2;
			margin-bottom: 0;
		}
	}

	.card-footer {
		padding: $space-2 $space-4;
		padding-bottom: $space-4;
	}

	@include hover_touch {
		border-color: $color-secondary;
		background: $surface-panel-strong;
		box-shadow: 0 14px 32px rgba($color-black, 0.34);
		transform: translateY(-2px);

		&::after {
			opacity: 1;
			animation: terminal_scan_x 0.85s $motion-ease;
		}

		.card-thumb {
			filter: saturate(1.12);
			transform: translateY(-2px);
		}
	}

	&.status-card {
		max-width: 220px;
		overflow: hidden;

		transition-duration: .2s;
		transition-property: border-color;

		.status-icon-container {
			position: relative;

			.status-indicator {
				position: absolute;
		    top: -15px;
    		left: -5px;
		
				font-size: $icon-size-md;
				color: $color-error;

				&.status-online {
					color: $color-success;
				}
			}

			.status-icon {
				display: flex;
				flex-direction: row;
				align-items: center;
    		justify-content: center;
				
				font-size: $icon-size-display;
				height: 108px;
				width: 100%;

				transition-duration: .2s;
				transition-property: color, transform;
			}
		}

		.card-title {
			display: flex;
			width: 100%;
			font-size: $font-size-md;
			font-weight: $font-weight-bold;

			align-items: center;
	    flex-direction: row;
	    flex-wrap: nowrap;
	    justify-content: space-between;

			transition-duration: .2s;
			transition-property: background-color, color;
		}

		.status-name {
			font-size: $font-size-sm;
			line-height: $line-height-normal;
		}

		@include hover_touch {
			.status-icon {
				transform: translateY(-2px) scale(1.03);
			}
		}

		&.card-success {
			@include state_panel($color-success);

			.status-icon {
				color: $color-success;
			}
		}

		&.card-warning {
			@include state_panel($color-warning);

			.status-icon {
				color: $color-warning;
			}
		}

		&.card-info {
			@include state_panel($color-info);

			.status-icon {
				color: $color-info;
			}
		}

		&.card-secondary {
			@include state_panel($color-secondary);

			.status-icon {
				color: $color-secondary;
			}
		}

		&.card-danger, &.card-error {
			@include state_panel($color-error);

			.status-icon {
				color: $color-error;
			}
		}
	}

	&.metric-card {
		max-width: 320px;
		border-color: $border-color-muted;

		.card-content {
			display: flex;
			flex-direction: column;
			gap: $space-4;
		}

		.metric-card-header {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			gap: $space-3;
		}

		.metric-card-label {
			margin: 0;
			color: $color-text-medium;
			font-size: $font-size-sm;
			font-weight: $font-weight-semibold;
			text-transform: uppercase;
		}

		.metric-card-icon {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: $control-height-md;
			height: $control-height-md;
			color: $color-black;
			background: $color-secondary;
			font-size: $icon-size-md;
			transition-duration: $motion-base;
			transition-timing-function: $motion-ease;
			transition-property: background, transform;
		}

		.metric-card-value {
			margin: 0;
			color: $color-text-light;
			font-size: $font-size-h1;
			font-weight: $font-weight-bold;
			line-height: $line-height-tight;
		}

		.metric-card-meta {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: $space-2;
			color: $color-text-dark;
			font-size: $font-size-sm;
		}

		.metric-card-delta {
			color: $color-success;
			font-weight: $font-weight-bold;

			&.metric-card-delta-negative {
				color: $color-error;
			}
		}

		@include hover_touch {
			.metric-card-icon {
				background: $color-primary;
				transform: translateY(-2px);
			}
		}
	}

	&.action-card {
		max-width: 360px;
		border-color: $color-secondary;

		.card-content {
			display: flex;
			flex-direction: column;
			gap: $space-4;
		}

		.action-card-kicker {
			display: inline-flex;
			width: max-content;
			padding: $space-1 $space-2;
			color: $color-black;
			background: $color-secondary;
			font-size: $font-size-xs;
			font-weight: $font-weight-bold;
			line-height: $line-height-base;
			text-transform: uppercase;
			transition-duration: $motion-base;
			transition-timing-function: $motion-ease;
			transition-property: background, transform;
		}

		.action-card-title {
			margin: 0;
			font-size: $font-size-xl;
			font-weight: $font-weight-bold;
			line-height: $line-height-snug;
			text-transform: uppercase;
		}

		.action-card-text {
			margin: 0;
			color: $color-text-medium;
			font-size: $font-size-sm;
			line-height: $line-height-relaxed;
		}

		.action-card-actions {
			display: flex;
			flex-wrap: wrap;
			gap: $space-2;
			margin-top: $space-2;
		}

		@include hover_touch {
			.action-card-kicker {
				background: $color-primary;
				transform: translateX($space-1);
			}
		}
	}
}