@gravityforms/components/css/admin/indicators/dot-indicator.css

UI components for use in Gravity Forms development. Both React and vanilla js flavors.

.gform-admin {

	.gform-indicator--dot {
		block-size: 1rem;
		border-radius: 50%;
		box-sizing: border-box;
		display: block;
		inline-size: 1rem;
		position: relative;

		&::before {
			block-size: 0.3125rem;
			border-radius: 50%;
			content: "";
			inline-size: 0.3125rem;
			inset-block-start: 50%;
			inset-inline-start: 50%;
			position: absolute;
			transform: translate(-50%, -50%);
		}

		&.gform-indicator--info {
			background-color: var(--gform-admin-color-light-blue);

			&::before {
				background-color: var(--gform-admin-color-santas);
			}
		}

		&.gform-indicator--success {
			background-color: var(--gform-admin-color-tara);

			&::before {
				background-color: var(--gform-admin-color-green);
			}
		}

		&.gform-indicator--warning {
			background-color: var(--gform-admin-color-sazerac-yellow);

			&::before {
				background-color: var(--gform-admin-color-yellow);
			}
		}

		&.gform-indicator--error {
			background-color: var(--gform-admin-color-background-red);

			&::before {
				background-color: var(--gform-admin-color-red);
			}
		}
	}
}

[dir="rtl"] .gform-admin .gform-indicator--dot::before {
	right: 20%;
}