.hulk-settings-wrap {

	.hulk-elements {
		display: flex;
		flex-direction: column;
		gap: 30px;
		grid-template-columns: repeat(12, 1fr);
		margin-top: 20px;
		margin-bottom: 20px;

		@media screen and (min-width: 768px) {
			display: grid;
		}
	}

	.hulk-element-item {
		display: flex;
		border-radius: 4px;
		width: 100%;
		grid-column: span 4;
		padding: 15px;
		gap: 10px;
		justify-content: space-between;
		align-items: center;
		background: #f9f9f9;
		border: 1px solid #ccc;
		box-shadow: 1px 3px 4px -5px rgb(55 55 55 / 42%);
		position: relative;

		&:after {
			content: attr(data-status);
			background-color: var(--hulk-settings-primary-color);
			text-transform: capitalize;
			border-radius: 4px;
			color: #fff;
			font-size: 12px;
			font-weight: 600;
			height: 22px;
			line-height: 22px;
			position: absolute;
			text-align: center;
			top: -12px;
			left: 15px;
			width: 65px;
			display: none;
		}

		&[data-status] {
			&:after {
				display: block;
			}
		}

		&[data-status="native"] {
			&:after {
				background-color: #E24E26;
			}
		}

		&[data-status="pro"] {
			&:after {
				background-color: #f2a80b;
			}
		}

		@media screen and (min-width: 768px) {
			grid-column: span 6;
		}

		@media screen and (min-width: 992px) {
			grid-column: span 4;
		}

		.block-title {
			flex: 1;
			display: flex;
			align-items: center;
			gap: 10px;
			color: #3c434a;

			img {
				max-width: 20px;
				max-height: 20px;
				margin: 0;
				padding: 0;
			}
		}

		h4 {
			margin: 0;
			padding: 0;
			line-height: normal;
			font-size: 14px;
			font-weight: 600;
			color: #3c434a;
		}

		a {
			margin: 0;
			padding: 0;
			display: flex;
			border-radius: 2px;
		}

		.block-content {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 5px;
		}

		.components-toggle-control {
			margin-left: 15px;

			label {
				display: none;
			}
		}

		.is-pro {
			background-color: #f2a80b;
			border-radius: 4px;
			color: #fff;
			font-size: 12px;
			font-weight: 600;
			height: 22px;
			line-height: 22px;
			position: absolute;
			text-align: center;
			top: -12px;
			right: 15px;
			width: 41px;
		}

		.components-form-toggle {
			&.is-disabled {
				pointer-events: none;
			}
		}
	}
}