.enb-component-gradient {
	// margin-block-end: 0;

	.components-button {
		inline-size: 28px;
		min-inline-size: 28px;
		min-block-size: 28px;
	}

	.components-circular-option-picker {
		display: flex;
		align-items: center;
		gap: 4px;

		.components-circular-option-picker__swatches {
			gap: 8px;
		}
	}

	.components-circular-option-picker__custom-clear-wrapper {
		margin: 0;
		block-size: 28px;
	}

	.components-circular-option-picker__clear {
		inline-size: 100%;
		block-size: 28px;
		border: 1px solid transparent;
		color: var(--enb-color-900);

		&:hover {
			border-color: var(--enb-color-300);
			background-color: var(--enb-color-200);
		}

	}
}

.enb-gradient-buttons {

	.components-button {
		position: relative;
		flex: 1 1 50%;
		border-radius: 3px;
		// inline-size: 30px;
		// block-size: 30px;
		block-size: 30px;
		// margin-inline-start: 0;
		// border: 2px solid #fff;
		background-size: 10px 10px;
		background-position: 0 0, 0 5px, 5px -5px, -5px 0;
		background-image:
			linear-gradient(45deg, #ddd 25%, transparent 25%),
			linear-gradient(-45deg, #ddd 25%, transparent 25%),
			linear-gradient(45deg, transparent 75%, #ddd 75%),
			linear-gradient(-45deg, transparent 75%, #ddd 75%);
		box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%);

		&:hover::after {
			content: "Edit";
			position: absolute;
			inset: 0;
			display: grid;
			place-content: center;
			background-color: rgba(0, 0, 0, 0.5);
			font-size: 12px;
			letter-spacing: 0.05em;
			color: #fff;
		}

		&.has-color {
			background-size: cover;
		}

		&:first-child,
		&:last-child {
			border-radius: 3px;
			overflow: hidden;
		}
	}
}