// all editor related upsell styles

@import "./UpsellInspectorNotice.scss";
@import "./UpsellModal.scss";
@import "./UpsellControlWrapper.scss";
@import "./UpsellTheme.scss";
@import "../base/__common.scss";
@import "../base/__colors.scss";

.ub-upsell-vitalize-text {
  font-weight: bold !important;
}

.ub-upsell-inspector-notice-wrapper {
  position: sticky;
  bottom: 0;
  left: 0;
  z-index: 13;
  box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.1), 0 -2px 4px -2px rgb(0 0 0 / 0.1);
}

.ub-active-block-icon {
  @extend %flex-center-all;

	.ub-active-block-icon-from-string {
		@extend %flex-center-all;

		svg {
			width: 20px !important;
			height: 20px !important;
		}
	}
}

.ub-upsell-modal-button {
  @extend %gutenberg-sidebar-default-borders;
  @extend %flex-center-all;
  @extend %default-border-radius;
  @extend %pointer;
  @extend %shadow-md;
  padding: 5px 10px;
  margin: 5px 10px;
  background-color: $white;

  &[data-ub-upsell-button-type=prio] {
	background-color: $blue-500 !important;
	color: $white !important;
  }
}

.ub-upsell-pro-panel {
  .components-panel__body-toggle {
	color: $text_red !important;
	font-weight: bold !important;
  }
}