.md-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--md-space-2);
  box-sizing: border-box;
  height: var(--md-control-h);
  min-height: var(--md-control-h);
  padding: 0 var(--md-space-5);
  border: 0;
  border-radius: var(--md-radius-sm);
  font: var(--md-label);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--md-duration) var(--md-ease), box-shadow var(--md-duration) var(--md-ease);
}

.md-btn:hover { text-decoration: none; }
.md-btn .md-icon { flex: 0 0 auto; }

.md-btn--filled {
  background-color: var(--md-primary);
  color: var(--md-on-primary);
}
.md-btn--success {
  background-color: var(--md-success);
  color: var(--md-on-success);
}
.md-btn--warning {
  background-color: var(--md-warning);
  color: var(--md-on-warning);
}
.md-btn--danger {
  background-color: var(--md-error);
  color: var(--md-on-error);
}

.md-btn--filled:hover { background-color: var(--md-primary-hover); }
.md-btn--success:hover { background-color: var(--md-success-hover); }
.md-btn--warning:hover { background-color: var(--md-warning-hover); }
.md-btn--danger:hover { background-color: var(--md-error-hover); }

.md-btn--outlined {
  background: var(--md-surface-lowest);
  color: var(--md-on-surface);
  box-shadow: inset 0 0 0 1px var(--md-outline);
}

.md-btn--text {
  background: transparent;
  color: var(--md-primary);
  padding: 0 var(--md-space-3);
}

.md-btn--outlined:hover,
.md-btn--text:hover { background: var(--md-state-on-light); }

.md-btn--icon {
  width: var(--md-control-h);
  min-width: var(--md-control-h);
  padding: 0;
}

.md-btn:disabled {
  opacity: 0.4;
  pointer-events: none;
}

.md-icon-btn {
  width: var(--md-control-h);
  height: var(--md-control-h);
  padding: 0;
  border: 0;
  border-radius: var(--md-radius-sm);
  background: transparent;
  color: var(--md-on-surface-variant);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.md-icon-btn:hover { background: var(--md-state-on-light); }

.md-icon-btn--on-dark {
  color: var(--md-on-primary);
}
.md-icon-btn--on-dark:hover { background: var(--md-state-on-dark); }

.md-btn-row {
  display: flex;
  gap: var(--md-space-2);
  justify-content: flex-end;
  flex-wrap: wrap;
  align-items: center;
}
.md-btn-row--start { justify-content: flex-start; }