/* ==========================================================================
   Peerly Draw — Buttons (Material 3)
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--md-sys-spacing-1);
  height: 40px;
  min-width: 40px;
  padding: 0 var(--md-sys-spacing-2);
  border-radius: var(--md-sys-shape-full);
  font-family: var(--md-sys-typescale-font);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line);
  font-weight: var(--md-sys-typescale-label-large-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  white-space: nowrap;
  user-select: none;
  overflow: hidden;
  isolation: isolate;
  transition:
    background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
    box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
    transform var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
  pointer-events: none;
}

.btn:hover::before { opacity: var(--md-sys-state-hover-opacity); }
.btn:focus-visible::before { opacity: var(--md-sys-state-focus-opacity); }
.btn:active::before { opacity: var(--md-sys-state-pressed-opacity); }
.btn:active { transform: scale(0.98); }

.btn i[class^="ri-"],
.btn i[class*=" ri-"] {
  font-size: 18px;
  flex-shrink: 0;
}

/* FILLED */
.btn--primary {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.btn--primary:disabled {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-container-opacity), transparent);
  color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-opacity), transparent);
  cursor: not-allowed;
  transform: none;
}
.btn--primary:disabled::before { opacity: 0; }

/* OUTLINED */
.btn--secondary {
  background: transparent;
  color: var(--md-sys-color-primary);
  border: 1px solid var(--md-sys-color-outline);
}
.btn--secondary:hover {
  background: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-hover-opacity), transparent);
}
.btn--secondary:disabled {
  color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-opacity), transparent);
  border-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-container-opacity), transparent);
  cursor: not-allowed;
}

/* TEXT */
.btn--text {
  background: transparent;
  color: var(--md-sys-color-primary);
  padding: 0 var(--md-sys-spacing-1half);
}

/* DANGER */
.btn--danger {
  background: transparent;
  color: var(--md-sys-color-error);
  border: 1px solid var(--md-sys-color-error);
}
.btn--danger:hover {
  background: color-mix(in srgb, var(--md-sys-color-error) var(--md-sys-state-hover-opacity), transparent);
}

/* ICON */
.btn--icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  border-radius: var(--md-sys-shape-full);
  color: var(--md-sys-color-on-surface-variant);
  background: transparent;
}
.btn--icon:hover { color: var(--md-sys-color-on-surface); }
.btn--icon i[class^="ri-"],
.btn--icon i[class*=" ri-"] { font-size: 24px; }

/* SMALL */
.btn--sm {
  height: 36px;
  min-width: 36px;
  padding: 0 var(--md-sys-spacing-1half);
  font-size: var(--md-sys-typescale-label-medium-size);
  gap: var(--md-sys-spacing-half);
}
.btn--sm i[class^="ri-"],
.btn--sm i[class*=" ri-"] { font-size: 18px; }

.btn--icon.btn--sm {
  width: 36px;
  padding: 0;
  min-width: 36px;
}

/* FAB */
.fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--md-sys-spacing-1half);
  min-width: 56px;
  height: 56px;
  padding: 0 var(--md-sys-spacing-2);
  border-radius: var(--md-sys-shape-lg);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  box-shadow: var(--md-sys-elevation-3);
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
  transition:
    box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
    background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.fab:hover { box-shadow: var(--md-sys-elevation-4); }
.fab:active { box-shadow: var(--md-sys-elevation-3); }
.fab--small { min-width: 40px; height: 40px; border-radius: var(--md-sys-shape-md); }
.fab--extended { min-width: auto; padding: 0 var(--md-sys-spacing-2half); }

.btn--full { width: 100%; }