.ai-media-wrap {
	display: block;
	position: relative;

	picture {
		display: block;
	}
}

.ai-media-note {
	display: flex;
	align-items: center;
	min-height: 32px;
	border-radius: 999px;
	padding: 2px 8px;
	position: absolute;
	bottom: 16px;
	right: 16px;
	pointer-events: auto;
	z-index: 1;

	&.is-light {
		background-color: rgba(255, 255, 255, 0.50);

		.ai-media-note-icon,
		.ai-media-note-label {
			background: #000000;
		}
	}

	&.is-dark {
		background-color: rgba(0, 0, 0, 0.50);

		.ai-media-note-icon,
		.ai-media-note-label {
			background: #ffffff;
		}
	}

	.is-mask {
		mask: var(--media-url) center / contain no-repeat;
		-webkit-mask: var(--media-url) center / contain no-repeat;
	}

	span {
		display: block;
	}

	.ai-media-note-icon {
		--media-url: url('../img/icon-ai.svg');
		width: 16px;
		height: 10px;
	}

	.ai-media-note-label-wrapper {
		width: 0;
		height: 8px;
		overflow: hidden;
		transition: width 0.25s ease;

		.ai-media-note-label {
			height: 8px;
			margin-left: 3px;
		}
	}

	&:hover {
		padding: 2px 10px;

		&.is-modified .ai-media-note-label-wrapper {
			width: calc(60px + 6px);
		}

		&.is-generated .ai-media-note-label-wrapper {
			width: calc(75px + 6px);
		}
	}

	&.is-modified .ai-media-note-label {
		--media-url: url('../img/icon-ai-modified.svg');	
		width: 60px;
	}

	&.is-generated .ai-media-note-label {
		--media-url: url('../img/icon-ai-generated.svg');
		width: 75px;
	}
}