@gravityforms/components/css/admin/multi-option-button.css

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

.gform-admin {

	.gform-multi-option-button {
		display: inline-grid;
		grid-template-columns: minmax(max-content, auto) 1.8125rem;
		position: relative;

		* {
			box-sizing: border-box;
		}
	}

	.gform-multi-option-button--width-full {
		grid-template-columns: minmax(0, 1fr) 1.8125rem;
		inline-size: 100%;

		.gform-multi-option-button__main {
			justify-content: center;
		}

		.gform-multi-option-button__option {
			padding-inline-end: 3rem;
		}

		.gform-multi-option-button__option.gform-button--size-xs {
			padding-inline-end: 2.5625rem;
		}

		.gform-multi-option-button__option.gform-button--size-sm {
			padding-inline-end: 2.6875rem;
		}

		.gform-multi-option-button__option.gform-button--size-xl {
			padding-inline-end: 3.4375rem;
		}

		.gform-multi-option-button__option.gform-button--size-height-s {
			padding-inline-end: 2.375rem;
		}

		.gform-multi-option-button__option.gform-button--size-height-m {
			padding-inline-end: 2.5rem;
		}

		.gform-multi-option-button__option.gform-button--size-height-l,
		.gform-multi-option-button__option.gform-button--size-height-xl,
		.gform-multi-option-button__option.gform-button--size-height-xxl {
			padding-inline-end: 2.75rem;
		}
	}

	.gform-multi-option-button--open {

		.gform-multi-option-button__main {
			border-end-start-radius: 0;
		}

		.gform-multi-option-button__trigger {
			border-end-end-radius: 0;
		}
	}

	.gform-multi-option-button__main {
		border-end-end-radius: 0;
		border-start-end-radius: 0;
		grid-column: 1;
		grid-row: 1;
		inline-size: 100%;
	}

	.gform-multi-option-button__main:focus,
	.gform-multi-option-button__trigger:focus {
		z-index: 11;
	}

	.gform-multi-option-button__trigger {
		border-end-start-radius: 0;
		border-start-start-radius: 0;
		grid-column: 2;
		grid-row: 1;
		inline-size: 1.875rem;
		justify-content: center;
		margin-inline-start: -0.0625rem;
		padding-inline: 0;

		&.gform-button--primary-new {
			background: var(--gform-admin-color-blue-jay);
			border-color: var(--gform-admin-color-blue-jay);

			&:hover,
			&:active {
				background: var(--gform-admin-color-port);
				border-color: var(--gform-admin-color-port);
			}

			&:focus {
				border-color: var(--gform-admin-color-light-blue);
			}
		}
	}

	.gform-multi-option-button__popover {
		grid-column: 1 / -1;
		grid-row: 1;
		inline-size: 100%;
	}

	.gform-multi-option-button__popover-inner {
		min-inline-size: 100%;
	}

	.gform-multi-option-button__options {
		display: flex;
		flex-direction: column;
	}

	.gform-multi-option-button__sizer {
		block-size: 0;
		display: flex;
		flex-direction: column;
		grid-column: 1 / -1;
		grid-row: 1;
		pointer-events: none;
		visibility: hidden;
	}

	.gform-multi-option-button__option {
		box-shadow: none;
		margin-block-start: -0.0625rem;

		&:not(:last-child) {
			border-radius: 0;
		}

		&:last-child {
			border-start-end-radius: 0;
			border-start-start-radius: 0;
		}

		&:focus {
			z-index: 1;
		}
	}

	.gform-multi-option-button__sizer-option {
		inline-size: auto;
	}
}