.domain-mapping-list {
	display: flex;
	flex-direction: column;
	gap: 8px;

	&__header {
		display: flex;
		flex-direction: column;
		gap: 2px;
		margin-bottom: 4px;
	}

	&__title {
		margin: 0;
		color: var(--l1-foreground);
	}

	&__description {
		margin: 0;
		color: var(--l3-foreground);
	}

	&__items {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	&__row {
		display: flex;
		align-items: flex-start;
		gap: 8px;

		.ant-form-item {
			margin-bottom: 0;
		}
	}

	&__field {
		flex: 1;
	}

	&__remove-btn {
		flex-shrink: 0;
		width: 32px !important;
		height: 32px !important;
		min-width: 32px !important;
		padding: 0 !important;
		border: none !important;
		border-radius: 2px !important;
		background: transparent !important;
		color: var(--destructive) !important;
		opacity: 0.6 !important;
		cursor: pointer;
		transition:
			background-color 0.2s,
			opacity 0.2s;
		box-shadow: none !important;
		display: flex;
		align-items: center;
		justify-content: center;

		svg {
			color: var(--destructive) !important;
			width: 12px !important;
			height: 12px !important;
		}

		&:hover {
			background: color-mix(
				in srgb,
				var(--danger-background) 10%,
				transparent
			) !important;
			opacity: 0.9 !important;
			color: var(--destructive) !important;

			svg {
				color: var(--destructive) !important;
			}
		}

		&:active {
			opacity: 0.7 !important;
			background: color-mix(
				in srgb,
				var(--danger-background) 15%,
				transparent
			) !important;
		}
	}
}
