import React from 'react';

export const styles: { [key: string]: React.CSSProperties } = {
  container: {
    position: 'absolute',
    backgroundColor: 'var(--editor-surface)',
    border: '1px solid var(--editor-border)',
    borderRadius: '12px',
    padding: '8px 12px',
    boxShadow: '0 14px 36px var(--editor-shadow)',
    zIndex: 10000,
    display: 'flex',
    backdropFilter: 'blur(18px)',
  },
  toolbar: {
    display: 'flex',
    alignItems: 'center',
    gap: '8px',
    width: '100%',
  },
  section: {
    display: 'flex',
    alignItems: 'center',
  },
  divider: {
    width: '1px',
    height: '24px',
    backgroundColor: 'var(--editor-border)',
  },
  buttonGroup: {
    display: 'flex',
    gap: '2px',
    backgroundColor: 'var(--editor-surface-muted)',
    borderRadius: '6px',
    padding: '2px',
  },
  iconButton: {
    width: '32px',
    height: '32px',
    border: 'none',
    borderRadius: '4px',
    backgroundColor: 'transparent',
    cursor: 'pointer',
    fontSize: '15px',
    fontWeight: '600',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    transition: 'all 0.15s ease',
    color: 'var(--editor-text)',
  },
  iconButtonActive: {
    backgroundColor: 'var(--editor-accent)',
    color: 'var(--primary-foreground)',
  },
  inputGroup: {
    display: 'flex',
    alignItems: 'center',
    gap: '6px',
    backgroundColor: 'var(--editor-surface-muted)',
    borderRadius: '6px',
    padding: '4px 8px',
  },
  inputLabel: {
    fontSize: '14px',
    fontWeight: '600',
    color: 'var(--editor-text-muted)',
    userSelect: 'none',
  },
  numberInput: {
    width: '40px',
    border: 'none',
    backgroundColor: 'transparent',
    fontSize: '14px',
    padding: '2px 4px',
    textAlign: 'center',
    outline: 'none',
    fontWeight: '500',
    color: 'var(--editor-text)',
  },
  textInput: {
    width: '100px',
    border: 'none',
    backgroundColor: 'transparent',
    fontSize: '13px',
    padding: '2px 4px',
    outline: 'none',
    color: 'var(--editor-text)',
  },
  colorGroup: {
    display: 'flex',
    gap: '6px',
  },
  colorItem: {
    position: 'relative',
    width: '32px',
    height: '32px',
  },
  colorInput: {
    width: '32px',
    height: '32px',
    border: 'none',
    borderRadius: '6px',
    cursor: 'pointer',
    padding: '0',
    overflow: 'hidden',
  },
  colorLabel: {
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    fontSize: '12px',
    fontWeight: '700',
    pointerEvents: 'none',
    color: 'var(--editor-text-muted)',
    mixBlendMode: 'difference',
  },
  bgIcon: {
    width: '14px',
    height: '14px',
    border: '2px solid currentColor',
    borderRadius: '2px',
  },
  sliderGroup: {
    display: 'flex',
    alignItems: 'center',
    gap: '6px',
    backgroundColor: 'var(--editor-surface-muted)',
    borderRadius: '6px',
    padding: '4px 8px',
  },
  sliderLabel: {
    fontSize: '14px',
    color: 'var(--editor-text-muted)',
    userSelect: 'none',
  },
  rangeInput: {
    width: '70px',
    height: '4px',
    cursor: 'pointer',
    appearance: 'none',
    background:
      'linear-gradient(to right, var(--editor-accent) 0%, var(--editor-accent) var(--value), color-mix(in srgb, var(--editor-border-strong) 72%, white) var(--value), color-mix(in srgb, var(--editor-border-strong) 72%, white) 100%)',
    borderRadius: '2px',
    outline: 'none',
  },
  sliderValue: {
    fontSize: '12px',
    fontWeight: '600',
    color: 'var(--editor-text)',
    minWidth: '24px',
    textAlign: 'right',
  },
  deleteButton: {
    width: '32px',
    height: '32px',
    border: 'none',
    borderRadius: '6px',
    backgroundColor: 'var(--editor-danger-soft)',
    color: 'var(--editor-danger)',
    cursor: 'pointer',
    fontSize: '16px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    transition: 'all 0.15s ease',
    marginLeft: 'auto',
  },
  hint: {
    fontSize: '13px',
    color: 'var(--editor-text-muted)',
    padding: '0 8px',
  },
};
