@use "~admin-stylesheets/colors";

.nab-contextual-help {

	&__wrapper--is-floating {
		position: fixed;
		bottom: 1.5em;
		right: 1.5em;
	}

	&__toggle {
		background: colors.$nab-background-white !important;
		color: colors.$wp-admin-theme-color !important;
		border-radius: 100% !important;
		border: 1px solid colors.$nab-border-light !important;
		box-shadow: none !important;
		height: auto !important;
		line-height: 0 !important;
		padding: 0 !important;
		text-shadow: none !important;
		transition: color 200ms ease-in-out;

		> * {
			font-size: 3em;
			height: 1em;
			width: 1em;
		}

		&:active,
		&:hover,
		&:focus {
			color: colors.$wp-admin-theme-color-darker-10 !important;
		}
	}

	&__title {
		margin-top: 0;
	}

	&__content {
		padding: 1em;
		width: 30em;
	}

	&__questions {
		list-style: disc;
		margin-left: 2em;
	}

	&__main-actions {
		display: flex;
		gap: 0.5em;
		justify-content: center;
		margin: 2em 0;
	}

	&__form-content {
		padding: 1em;
		width: 30em;

		> .components-base-control + .components-base-control {
			margin-top: 1em;
		}
	}

	&__form-title {
		margin-top: 0;
	}

	&__form-actions {
		margin-top: 1em;
		text-align: right;
	}
}