/* Minimal functional styles for Inspector compound components.
 * This file handles layout only - no visual design.
 * Import this optionally: import '@react-email/editor/styles/inspector.css';
 */

[data-re-inspector-field] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

[data-re-inspector-field] > label {
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex-shrink: 0;
  width: 40%;
}

[data-re-inspector-select],
[data-re-inspector-number],
[data-re-inspector-color-control] {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  border: 1px solid var(--re-border, #e5e5e5);
  border-radius: 0.25rem;
  padding: 0 0.25rem;
  height: 1.6rem;
  outline: none;
}

[data-re-inspector-number]:focus-within,
[data-re-inspector-color-control]:focus-within {
  border-color: var(--re-text-muted, #6b6b6b);
}

[data-re-inspector-unit],
[data-re-inspector-color-trigger] {
  margin-left: 0.2rem;
  width: 1rem;
  height: 1rem;
  aspect-ratio: 1 / 2;
  border-radius: 0.25rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

[data-re-inspector-color-trigger]::-webkit-color-swatch-wrapper {
  padding: 0;
}

[data-re-inspector-color-trigger]::-webkit-color-swatch {
  border: none;
  border-radius: inherit;
}

[data-re-inspector-color-trigger]::-moz-color-swatch {
  border: none;
  border-radius: inherit;
}

[data-re-inspector-input],
[data-re-inspector-color-hex] {
  max-width: 3.5rem;
  font-size: 0.75rem;
  font-family: monospace;
  padding: 0.25rem 0.375rem;
  color: inherit;
  outline: none;
}

[data-re-inspector-number]:has(+ [data-re-inspector-toggle-group])
  [data-re-inspector-input] {
  max-width: 2.3rem;
}

/* ----------------------------------------------------------------
 * Toggle group
 * ---------------------------------------------------------------- */

[data-re-inspector-toggle-group] {
  display: inline-flex;
  border: 1px solid var(--re-border, #e5e5e5);
  border-radius: 0.25rem;
  overflow: hidden;
}

[data-re-inspector-toggle-item] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.375rem;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 0.75rem;
}

[data-re-inspector-toggle-item] + [data-re-inspector-toggle-item] {
  border-left: 1px solid var(--re-border, #e5e5e5);
}

[data-re-inspector-toggle-item][data-active] {
  background: var(--re-bg-active, #f0f0f0);
}

/* ----------------------------------------------------------------
 * Tooltip
 * ---------------------------------------------------------------- */

[data-re-inspector-tooltip] {
  position: relative;
  display: inline-flex;
}

[data-re-inspector-tooltip-content] {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  background: var(--re-tooltip-bg, #1a1a1a);
  color: var(--re-tooltip-text, #fff);
  font-size: 0.6875rem;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
  margin-bottom: 0.25rem;
}

[data-re-inspector-tooltip]:hover [data-re-inspector-tooltip-content] {
  display: block;
}

/* ----------------------------------------------------------------
 * Buttons
 * ---------------------------------------------------------------- */

[data-re-inspector-button] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--re-border, #e5e5e5);
  border-radius: 0.25rem;
  background: transparent;
  color: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}

[data-re-inspector-button]:hover {
  background: var(--re-bg-hover, #f5f5f5);
}

[data-re-inspector-icon-button] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  border-radius: 0.25rem;
}

[data-re-inspector-icon-button]:hover {
  background: var(--re-bg-hover, #f5f5f5);
}

/* ----------------------------------------------------------------
 * Label & Text
 * ---------------------------------------------------------------- */

[data-re-inspector-label] {
  font-size: 0.75rem;
  color: var(--re-text-muted, #6b6b6b);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 4rem;
}

[data-re-inspector-text][data-color="muted"] {
  color: var(--re-text-muted, #6b6b6b);
}

/* ----------------------------------------------------------------
 * Prop row
 * ---------------------------------------------------------------- */

[data-re-inspector-prop-row] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.75rem;
  width: 100%;
}

/* ----------------------------------------------------------------
 * Section
 * ---------------------------------------------------------------- */

[data-re-inspector-section] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-bottom: 1px solid var(--re-border, #e5e5e5);
  padding: 1rem 0;
}

[data-re-inspector-section]:last-child {
  border-bottom: none;
}

[data-re-inspector-section-header] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

[data-re-inspector-section-toggle] {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  font-weight: 600;
  font-size: 0.75rem;
}

[data-re-inspector-section-body] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ----------------------------------------------------------------
 * Breadcrumb
 * ---------------------------------------------------------------- */

[data-re-inspector-breadcrumb-list] {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.75rem;
}

[data-re-inspector-breadcrumb-item] {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

[data-re-inspector-breadcrumb-separator] {
  color: var(--re-text-muted, #6b6b6b);
}

[data-re-inspector-breadcrumb-button] {
  background: none;
  border: none;
  padding: 0;
  color: var(--re-text, #1c1c1c);
  font: inherit;
  font-size: 0.75rem;
  cursor: default;
}

[data-re-inspector-breadcrumb-button][data-clickable] {
  cursor: pointer;
}

[data-re-inspector-breadcrumb-button][data-clickable]:hover {
  text-decoration: underline;
}

[data-re-inspector-breadcrumb-ellipsis] {
  color: var(--re-text-muted, #6b6b6b);
  font-size: 0.75rem;
}