/**
 * Card using WP Core component
 */

@use "~@wordpress/base-styles/colors" as wp-colors;
@use "../../../colors/colors.module" as colors;

.newspack-card--core,
.newspack-wizard .newspack-card--core {
	background: white;
	position: relative;
	transition: background-color 125ms ease-in-out, box-shadow 125ms ease-in-out, color 125ms ease-in-out;
	svg {
		transition: fill 125ms ease-in-out;
	}
	&__icon {
		border-radius: 50%;
		display: grid;
		height: 48px;
		place-items: center;
		width: 48px;
		svg {
			fill: var(--wp-admin-theme-color);
			height: 40px;
			width: 40px;
		}
		.newspack-card--core__has-icon-background-color & {
			background: var(--wp-admin-theme-color-lighter-10);
		}
	}
	&__is-small {
		h1,
		h2,
		h3,
		h4,
		h5,
		h6 {
			font-size: 14px;
			font-weight: 500;
		}
		.newspack-card--core__icon {
			height: 40px;
			width: 40px;
			svg {
				height: 24px;
				width: 24px;
			}
		}
	}
	&__no-margin .components-card__body {
		padding: 0 !important;
	}
	&__header {
		color: wp-colors.$gray-700;
		column-gap: 16px;
		position: relative;
		.newspack-card--core__action {
			margin: 0;
			label {
				border: 0;
				clip-path: inset(50%);
				height: 1px;
				margin: -1px;
				overflow: hidden;
				padding: 0;
				position: absolute !important;
				width: 1px;
				word-wrap: normal !important;
			}
		}
		.components-dropdown-menu {
			aspect-ratio: 1;
			border-left: 1px solid wp-colors.$gray-200;
			display: grid;
			height: 100%;
			padding: 4px;
			place-items: center;
			position: absolute;
			right: 0;
			top: 0;
		}
	}
	&__header--is-draggable {
		.newspack-card--core__header-content {
			padding-left: 65px;
		}
		.newspack-card--core__header__draggable-controls {
			align-items: center;
			border-right: 1px solid wp-colors.$gray-200;
			display: flex;
			height: 100%;
			justify-content: space-between;
			left: 0;
			padding: 0 8px;
			position: absolute;
			top: 0;
		}
		.newspack-card--core__header__draggable-controls__drag-handle {
			cursor: grab;
			display: grid;
			place-items: center;
		}
		.newspack-card--core__header__draggable-controls__move-buttons {
			display: flex;
			flex-direction: column;
			.components-button.has-icon {
				height: 16px;
				padding: 0;
				width: 100%;
			}
		}
	}
	button.newspack-card--core__header {
		appearance: none;
		background-color: white;
		border: none;
		cursor: pointer;
		text-align: left;
	}
	&__header-content {
		display: grid;
		flex: 1;
		grid-gap: 8px;
		h1,
		h2,
		h3,
		h4,
		h5,
		h6,
		p {
			margin-bottom: 0;
			margin-top: 0;
			transition: color 125ms ease-in-out;
		}
		h1,
		h2,
		h3,
		h4,
		h5,
		h6 {
			align-items: center;
			color: wp-colors.$gray-900;
			font-weight: 500;
			display: flex;
			gap: 8px;
			.newspack-badge {
				font-weight: 400;
			}
		}
	}
	&__is-active {
		border-color: var(--wp-admin-theme-color);
		box-shadow: var(--wp-admin-theme-color) 0 0 0 1px;
		button.newspack-card--core__header {
			background-color: rgba( var(--wp-admin-theme-color--rgb), 0.04 );
			color: var(--wp-admin-theme-color);
			h1,
			h2,
			h3,
			h4,
			h5,
			h6 {
				color: var(--wp-admin-theme-color);
			}
			svg {
				fill: var(--wp-admin-theme-color);
			}
		}

		&.newspack-card--core__has-children {
			button.newspack-card--core__header {
				border-bottom-left-radius: 0;
				border-bottom-right-radius: 0;
			}
			.newspack-card--core__body {
				border-top: 1px solid var(--wp-admin-theme-color);
			}
			.components-card__divider {
				background: wp-colors.$gray-100;
			}
		}
	}
	&__buttons-card {
		display: block;
		text-decoration: none;
		&:active,
		&:hover {
			border-color: var(--wp-admin-theme-color);
			box-shadow: var(--wp-admin-theme-color) 0 0 0 1px;
			.newspack-card--core__header {
				color: var(--wp-admin-theme-color);
				h1,
				h2,
				h3,
				h4,
				h5,
				h6 {
					color: var(--wp-admin-theme-color);
				}
				svg {
					fill: var(--wp-admin-theme-color);
				}
			}
		}
	}
	hr.components-card__divider {
		margin: 0;
	}
	&__is-narrow {
		margin-left: auto;
		margin-right: auto;
		@media screen and ( min-width: 608px ) {
			max-width: 576px;
		}
	}
	&__body {
		> div:not(.components-card__body):not(.components-card__media):not(.components-card__divider) {
			padding: 16px 24px;
			.newspack-card--core__is-small & {
				padding: 16px;
			}
			.newspack-card--core__no-margin & {
				padding: 0;
			}
		}
	}
}