/* Visibility-controlled block base styles - hide empty blocks by default */
.visibility-controlled-block[data-is-empty="true"] {
  display: none !important;
}

/* Only show blocks in Layout Builder context when they would normally be hidden */
.layout-builder-context .visibility-controlled-block[data-is-empty="true"] {
  display: block !important;
  outline: 2px dashed var(--error-500);
  background-color: var(--error-300);
}

/* Layout Builder specific styling */
.layout-builder-context .visibility-controlled-block {
  position: relative;
  min-height: 50px; /* Ensure blocks have minimum height in Layout Builder */
}

/* Layout Builder indicator */
.layout-builder-context
  .visibility-controlled-block[data-is-empty="true"]::after {
  content: "It will be hidden if the specified field is empty.";
  position: absolute;
  bottom: 0px;
  left: 0px;
  background: var(--error-500);
  color: white;
  padding: 2px 5px;
  font-size: 10px;
  border-radius: 0 3px 0 0;
  z-index: 2;
}

/* Status indicators with different colors - only in Layout Builder */
.layout-builder-context
  .visibility-controlled-block[data-is-empty="false"]::before {
  background: var(--primary-800, #2563eb);
  border-radius: 5px;
}

.layout-builder-context
  .visibility-controlled-block[data-is-empty="true"]::before {
  background: rgba(150, 0, 0, 0.7);
}

.layout-builder-context .visibility-controlled-block.visibility-error::before {
  background: rgba(255, 165, 0, 0.9);
}

.layout-builder-context
  .visibility-controlled-block.visibility-no-entity::before {
  background: rgba(128, 128, 128, 0.8);
}

/* Hover effect for full info display - only in Layout Builder */
.layout-builder-context .visibility-controlled-block::before:hover {
  white-space: normal;
  max-width: none;
  z-index: 1000;
}