:host {
  display: inline-flex;
}

button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: 1px solid #313244;
  border-radius: 6px;
  padding: 7px 12px;
  color: #a6adc8;
  font-size: 13px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

button:hover {
  background: #313244;
  color: #f38ba8;
  border-color: #f38ba8;
}

.icon { display: flex; align-items: center; }

/* compact attribute — icon only */
:host([compact]) button { padding: 7px; }
:host([compact]) .label { display: none; }