.qb-entity-options {
	display: flex;
	justify-content: space-between;
	margin: 4px 0;
	width: 100%;

	.left-col-items {
		display: flex;
		align-items: center;
		gap: 12px;
		max-width: 100%;

		.title {
			font-weight: 500;
			font-style: italic;
			.entityType {
				text-transform: capitalize;
			}
		}
	}

	.options {
		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
		border-radius: 2px;
		margin-left: -32px;
		max-width: 100%;

		border-radius: 2px;

		.periscope-btn {
			min-width: 32px;

			border-radius: 2px;
			border: 1px solid var(--l1-border);
			background: var(--l2-background);
			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
		}

		.query-name {
			font-size: 12px;
			font-style: normal;
			font-weight: 400;
			pointer-events: none;
			// line-height: 18px;

			color: var(--bg-sakura-400) !important;

			border: 1px solid color-mix(in srgb, var(--bg-sakura-500) 20%, transparent) !important;
			background: color-mix(
				in srgb,
				var(--bg-sakura-500) 10%,
				transparent
			) !important;

			&:hover {
				border: 1px solid color-mix(in srgb, var(--bg-sakura-500) 40%, transparent) !important;
				color: var(--bg-sakura-400) !important;
			}
		}

		.formula-name {
			font-size: 12px;
			font-style: normal;
			font-weight: 400;
			// line-height: 18px;

			color: var(--bg-sienna-400) !important;

			border: 1px solid color-mix(in srgb, var(--bg-sienna-400) 20%, transparent) !important;
			background: color-mix(in srgb, var(--bg-sienna-400) 10%, transparent);

			&:hover {
				border: 1px solid color-mix(in srgb, var(--bg-sienna-400) 40%, transparent) !important;
				color: var(--bg-sienna-400) !important;
			}
		}

		.options-group {
			max-width: 100%;
		}
	}
}
