@gravityforms/components/css/admin/pill.css

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

.gform-admin {

	.gform-pill {
		background: var(--gform-admin-color-light-blue);
		block-size: 1.625rem;
		border: 1px solid var(--gform-admin-color-porcelain-gray);
		border-radius: 0.8125rem;
		box-sizing: border-box;
		cursor: pointer;
		display: inline-flex;
		gap: 0.1875rem;
		outline: none;
		padding-block: 0.125rem;
		padding-inline: var(--gform-admin-spacer-3);
		text-decoration: none;
		transition: var(--gform-admin-transition-button);
		white-space: nowrap;

		&:hover .gform-pill__icon {
			color: var(--gform-admin-color-comet);
		}

		&:focus {
			border-color: var(--gform-admin-color-blue-ribbon);
			outline: 0.125rem solid var(--gform-admin-color-spindle);
		}

		&:active {
			box-shadow: var(--gform-admin-box-shadow-micro);

			.gform-pill__icon {
				color: var(--gform-admin-color-comet);
			}
		}

		&:disabled {
			opacity: 0.5;
			pointer-events: none;
		}
	}

	.gform-pill__text {
		transform: translateY(1px);
	}

	.gform-pill__icon {
		color: var(--gform-admin-color-amethyst-smoke);
		font-size: 1.25rem;
		transition: var(--gform-admin-transition-color);
	}
}