/**
 * Feedspace Widgets Admin Styles
 *
 * Styles specific to the widgets page
 *
 * @package Feedspace
 * @since 1.0.0
 */

@use 'shared' as *;

// Widgets page specific styles
.feedspace-admin {
  // Widget-specific form styles
  .feedspace-widget-input {
    .feedspace-textarea {
      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
      font-size: 13px;
    }
  }

  // Widget preview specific styles
  .feedspace-preview {
    .feedspace-preview-content {
      .feedspace-embed {
        width: 100%;
        height: 100%;
        min-height: 200px;
      }
    }
  }
}

// Block Editor Styles
.wp-block-feedspace-widgets {
  margin: 20px 0;

      .feedspace-widgets-preview {
      .feedspace-widget-preview {
        width: 100%;
        min-height: 200px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background-color: #f9f9f9;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .feedspace-widget-placeholder {
        width: 100%;
        min-height: 200px;
        border: 1px dashed #ccc;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #f9f9f9;
        color: #666;
        font-style: italic;
        text-align: center;
        border-radius: 4px;

        p {
          margin: 5px 0;
          font-size: 14px;
        }
      }
    }

  // Block editor specific styles
  &.is-selected {
    .feedspace-widgets-preview {
      border: 2px solid #0073aa;
      border-radius: 4px;
    }
  }
}

// Block toolbar styles
.block-editor-block-toolbar {
  .wp-block-feedspace-widgets {
    .feedspace-widgets-preview {
      // Ensure proper display in block editor
      position: relative;
    }
  }
}

// Info Notice styles (shared with settings page)
.feedspace-info-notice {
  display: flex;
  align-items: flex-start;
  padding: 1.5rem;
  background: #e3f2fd;
  border-radius: 8px;
  border: 1px solid #2196f3;
  border-left: 4px solid #2196f3;

  .feedspace-info-icon {
    font-size: 1.5rem;
    margin-right: 1rem;
    color: #1976d2;
    flex-shrink: 0;
    margin-top: 0.25rem;
  }

  .feedspace-info-content {
    flex: 1;

    h3 {
      margin: 0 0 0.75rem 0;
      font-size: 1.1rem;
      font-weight: 600;
      color: #1565c0;
    }

    p {
      margin: 0 0 0.75rem 0;
      color: #424242;
      font-size: 0.9rem;
      line-height: 1.5;

      &:last-child {
        margin-bottom: 0;
      }

      strong {
        color: #1565c0;
      }
    }
  }
}