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

.card {
	max-width: 340px;
	width: 100%;
	@include hard_panel($color-text-light);

	.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;
		}

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

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

	&.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;
			}
		}

		.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;
		}

		&.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;
		}

		.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;
			}
		}
	}

	&.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;
		}

		.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;
		}
	}
}