/**
 * ******************************************************
 * @file                     copy-code-button.scss
 * @description             「复制代码按钮样式」
 * @author                  ai-chat / mysteel-web
 * ******************************************************
 */

// --- 复制按钮主题变量 ---
:root {
  --copy-btn-bg: #f0f0f0;
  --copy-btn-color: #555;
  --copy-btn-border: #ddd;
  --copy-btn-hover-bg: #e0e0e0;
  --copy-btn-hover-color: #333;
  --copy-btn-hover-border: #ccc;
  --copy-btn-success-bg: #d4edda;
  --copy-btn-success-color: #155724;
  --copy-btn-success-border: #c3e6cb;
  --copy-btn-error-bg: #f8d7da;
  --copy-btn-error-color: #721c24;
  --copy-btn-error-border: #f5c6cb;

  // --- New Subtle Theme Variables ---
  --header-bg: #ebedf0; // Adjusted for more prominence in light mode
  --header-border: #eaeaef;
  --btn-icon-color: #606770;
  --btn-hover-bg: #eaeaef;
  --btn-hover-icon-color: #2c3e50;
  --btn-focus-outline: #007aff; // Example focus color
}

html.dark {
  --copy-btn-bg: #444;
  --copy-btn-color: #ccc;
  --copy-btn-border: #555;
  --copy-btn-hover-bg: #555;
  --copy-btn-hover-color: #eee;
  --copy-btn-hover-border: #666;
  --copy-btn-success-bg: #2a5c34;
  --copy-btn-success-color: #c3e6cb;
  --copy-btn-success-border: #3a7d44;
  --copy-btn-error-bg: #721c24;
  --copy-btn-error-color: #f5c6cb;
  --copy-btn-error-border: #842029;

  // --- New Subtle Theme Variables ---
  --header-bg: #3a3a3c; // Darker than default dark code bg
  --header-border: #4a4a4e;
  --btn-icon-color: #a0a0a5;
  --btn-hover-bg: #4a4a4e;
  --btn-hover-icon-color: #eaeaea;
  --btn-focus-outline: #0a84ff; // Example dark focus color
}
// --- 结束：复制按钮主题变量 ---

// ======================================================
// #region Code Block Structure and Header Layout
// ======================================================

.code-block-wrapper {
  position: relative; // Context for potential future needs inside pre, not for header buttons
  margin-top: 1em;
  margin-bottom: 1em;
  overflow: hidden; // Crucial for containing border-radius
  clear: both;
  // border: 1px solid var(--vp-code-block-divider-color, var(--vp-c-divider)); // Removed border
  border: none;
  border-radius: 8px; // Keep radius for header/pre rounding consistency
  // Add a subtle box-shadow to replace the border for visual separation
  box-shadow: 0 1px 2px rgb(0 0 0 / 5%);

  html.dark & {
    box-shadow: 0 1px 2px rgb(0 0 0 / 20%);
  }
}

.code-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  min-height: auto; // Let padding dictate height
  padding: 0 0.85em; // Reduced vertical padding for compactness
  background-color: var(--header-bg);
  border-bottom: 1px solid var(--header-border); // Keep bottom border for separation
  // min-height: 32px; // Or set a smaller explicit min-height if needed
}

.code-language {
  flex-grow: 1;
  margin-right: 1em;
  overflow: hidden;
  font-size: 0.8em; // Slightly smaller font size
  font-weight: 500; // Slightly bolder
  color: var(--vp-c-text-2);
  text-overflow: ellipsis;
  text-transform: uppercase;
  letter-spacing: 0.5px; // Add subtle letter spacing
  white-space: nowrap;
}

.code-block-buttons {
  display: flex;
  flex-shrink: 0; // Prevent this container from shrinking
  gap: 8px; // Space *between* buttons
  align-items: center; // Align buttons vertically
  // No explicit width: width is determined by button sizes + gap
}

// #endregion Code Block Structure and Header Layout
// ======================================================


// ======================================================
// #region Base and Specific Button Styles
// ======================================================

// --- Refined Base Button Style ---
.code-block-buttons button {
  position: relative; // Keep relative for positioning context
  top: auto; right: auto; bottom: auto; left: auto; z-index: auto;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 24px; // Slightly smaller
  height: 24px; // Slightly smaller
  padding: 0;
  color: var(--btn-icon-color); // Use new icon color variable
  cursor: pointer;
  background-color: transparent; // Remove default background
  border: none; // Remove default border
  border-radius: 6px; // Slightly more rounded
  // Transition only color and background
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;

  svg {
    width: 16px;
    height: 16px;
    // Removed svg transition, handled by button color transition
  }

  // Refined Hover
  &:hover:not(:disabled) {
    color: var(--btn-hover-icon-color);
    background-color: var(--btn-hover-bg);
    border: 1px solid var(--btn-hover-bg); // Add border matching hover background
  }

  // Refined Focus (Accessibility)
  &:focus-visible {
    outline: 2px solid var(--btn-focus-outline);
    outline-offset: 2px;
    // Optionally add a subtle border matching focus outline if needed
    // border: 1px solid var(--btn-focus-outline);
  }

  // Base Disabled
  &:disabled {
    color: var(--btn-icon-color); // Keep icon color, opacity handles dimming
    cursor: default;
    background-color: transparent; // Ensure no background when disabled
    border: none; // Ensure no border when disabled
    opacity: 0.5; // Use opacity for general disabled state
  }
}

// --- Copy Button Specifics ---
.copy-code-button {
  // Inherits refined base styles
  svg {
    fill: none;
    stroke: currentcolor;
    stroke-width: 2;
  }

  &.copied {
    color: var(--copy-btn-success-color);
    background-color: var(--copy-btn-success-bg);
    border-color: var(--copy-btn-success-bg); // Border matches background
    opacity: 1; // Ensure visible
  }

  &.error {
    color: var(--copy-btn-error-color);
    background-color: var(--copy-btn-error-bg);
    border-color: var(--copy-btn-error-bg); // Border matches background
    opacity: 1; // Ensure visible
  }

  // Override base disabled state ONLY for copied/error feedback
  &:disabled {
    // Only apply if it ALSO has copied or error class
    &.copied, &.error {
      cursor: default;
      opacity: 1; // Keep fully visible
      // Background, color, and border are already set by .copied/.error
    }
    // Otherwise, the default disabled style (opacity: 0.5, no border) applies
  }
}

// --- Run HTML Button Specifics ---
.run-html-button {
  // Inherits refined base styles
  svg {
    fill: currentcolor;
    stroke: none;
  }

  // Uses the base disabled style (opacity: 0.5)
}

// #endregion Base and Specific Button Styles
// ======================================================


// ======================================================
// #region Code Area Styling (<pre>)
// ======================================================

.code-block-wrapper pre {
  padding: 1em; // Internal padding for code content
  margin: 0 !important; // Override default margins
  overflow: auto; // Enable horizontal/vertical scrollbars if needed
  font-size: var(--vp-code-font-size, 0.875rem); // Match VitePress font size
  line-height: var(--vp-code-line-height, 1.7); // Match VitePress line height if available
  background-color: var(--vp-code-block-bg, #f8f8f8) !important;
  border-radius: 0 0 8px 8px !important; // Round only bottom corners

  html.dark & {
    background-color: var(--vp-code-block-bg, #2d2d2d) !important;
  }

  // Ensure code tag inside pre doesn't interfere
  code {
    // Reset potential conflicting styles
    padding: 0;
    margin: 0;
    font-size: inherit; // Inherit size from pre
    background: none;
    border-radius: 0;
  }
}

// #endregion Code Area Styling (<pre>)
// ======================================================
