/* All sections */
#tab-panel-ymfo-how-to-use,
.ymfo-page-header,
.ymfo-page-content {
	code {
		padding: 3px 6px;
		border-radius: 3px;
	}
}

/* Content */
.ymfo-page-content {
	/* Main options form */
	&__options-form {
		tr {
			&:has( *[ required ] ) th label::after {
				content: ' *';
		
				color: red;
			}
		}
	}
}

/* Common */
.ymfo-menu-separator {
	min-height: unset !important;
}

.ymfo-image-field {
	img {
		width: 25em;
		height: auto;
		margin-bottom: 16px;
		border-radius: 6px;

		@media screen and ( max-width: 782px ) {
			width: 100%;
		}
	}

	.action-buttons {
		margin-bottom: 6px;
		
		button {
			&[ hidden ] {
				display: none;
			}
		}
	}
}

code.ymfo-copyable {
	position: relative;
	padding-left: 18px !important;

	cursor: pointer;

	line-height: 100%;

	&:hover {
		color: #000;

		&::after {
			background-color: #000;
		}
	}

	&::after {
		content: '';

		background-color: #3c434a;
		mask-image: url( ../images/copyable.svg );
		mask-size: contain;
		mask-position: center;
		mask-repeat: no-repeat;
		width: 8px;
		height: 8px;

		position: absolute;
		top: 7px;
		left: 6px;
	}

	&.ymfo-copied::after {
		background-color: #49ad52;
		mask-image: url( ../images/copied.svg );
	}
}