/**
 * Case Converter Tool CSS
 */

.case-converter .controls-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
}

.case-converter .convert-btn {
  flex: 1;
  min-width: 120px;
  text-align: center;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  background-color: #f1f5f9;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
}

.case-converter.theme-dark .convert-btn {
  background-color: #334155;
  border-color: #475569;
  color: #f8fafc;
}

.case-converter .convert-btn:hover {
  background-color: #e2e8f0;
  border-color: #cbd5e0;
}

.case-converter.theme-dark .convert-btn:hover {
  background-color: #475569;
  border-color: #64748b;
}

.case-converter .stats {
  display: flex;
  gap: 2rem;
  color: #64748b;
  font-size: 0.875rem;
}

.case-converter.theme-dark .stats {
  color: #cbd5e0;
}

.case-converter .copy-btn {
  margin-top: 0.5rem;
}

/* Button styles for different cases */
.case-converter .convert-uppercase {
  font-weight: bold;
  text-transform: uppercase;
}

.case-converter .convert-lowercase {
  text-transform: lowercase;
}

.case-converter .convert-titlecase {
  text-transform: capitalize;
}

.case-converter .convert-alternatingcase {
  font-family: monospace;
}

/* Responsive styles */
@media (max-width: 768px) {
  .case-converter .controls-group {
    flex-direction: column;
  }
  
  .case-converter .convert-btn {
    width: 100%;
  }
  
  .case-converter .stats {
    flex-direction: column;
    gap: 0.5rem;
  }
}