/* Button Component Styles */

/* Base button classes */
.btn-compose {
  color: #fff;
  border: none;
  padding: 12px 18px;
  border-radius: 10px;
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  touch-action: manipulation;
  transition: transform 0.05s ease, box-shadow 0.05s ease;
  box-shadow: 0 8px 24px rgba(56, 189, 248, 0.2);
  background: linear-gradient(135deg, #38bdf8, #0092d5);
  display: flex;
  text-align: center;
  margin-left: 0;
}

.btn-compose:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(56, 189, 248, 0.3);
}

.btn-compose.drag-over {
  background-color: #1a3a70 !important;
  box-shadow: 0 0 0 3px rgba(45, 90, 163, 0.4);
}

.btn-compose:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.btn-color-red {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  padding: 6px 12px;
}

.btn-wide {
  width: 120px;
}

/* Icon buttons */
.icon-btn {
  width: 40px;
  height: 40px;
  cursor: pointer;
  border-radius: 4px;  
  transition: all 0.2s ease;
  position: relative;
  border: 1px solid;
}

/* Copy button - cyan/blue */
.icon-btn--copy {
  background-color: rgba(56, 189, 248, 0.1);
  border-color: rgba(56, 189, 248, 0.2);
}

.icon-btn--copy:hover {
  background-color: rgba(56, 189, 248, 0.2);
  border-color: rgba(56, 189, 248, 0.4);
}

.icon-btn--copy:focus {
  outline: 2px solid rgba(56, 189, 248, 0.4);
  outline-offset: 2px;
}

/* Download button - green */
.icon-btn--download {
  background-color: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.2);
}

.icon-btn--download:hover {
  background-color: rgba(34, 197, 94, 0.2);
  border-color: rgba(34, 197, 94, 0.4);
}

.icon-btn--download:focus {
  outline: 2px solid rgba(34, 197, 94, 0.4);
  outline-offset: 2px;
}

/* Delete button - red */
.icon-btn--delete {
  background-color: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
}

.icon-btn--delete:hover {
  background-color: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
}

.icon-btn--delete:focus {
  outline: 2px solid rgba(239, 68, 68, 0.4);
  outline-offset: 2px;
}


/* Utility class for margin */
.btn-margin-left {
  margin-left: 10px;
}