/* -------------------------------------------------------- */
/* 🔹 App Buttons                                           */
/* -------------------------------------------------------- */
/* Supports primary, secondary, tertiary, text and textLink */
/* Mirrors app_buttons.dart                                 */


/* -------------------------------------------------------- */
/* 🔹 Shared base                                           */
/* -------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--space-l);
  font-family: var(--font-family);
  font-size: var(--text-body-medium);
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius-small);
  border: none;
  cursor: pointer;
  text-decoration: none;
  width: 100%;
  transition: background-color 0.15s ease;
  position: relative;
}

/* Prevent browser underline on anchor buttons */
a.btn:hover,
a.btn:focus {
  text-decoration: none;
}

/* Press overlay */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--color-press-highlight);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.btn:hover::after {
  opacity: 1;
}

.btn:active::after {
  opacity: 1;
  background: var(--color-press-active);
  transition-duration: 0.01s;
}

/* Mirrors DimmedSection — dimmed when form is invalid */
.btn:disabled {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}


/* -------------------------------------------------------- */
/* 🔹 Primary Button                                        */
/* -------------------------------------------------------- */
/* Filled with primary color background                     */

.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.btn--primary:hover {
  text-decoration: none;
  filter: brightness(1.1);
}


/* -------------------------------------------------------- */
/* 🔹 Secondary Button                                      */
/* -------------------------------------------------------- */
/* Outlined, transparent background                         */

.btn--secondary {
  background-color: transparent;
  color: var(--color-primary);
  border: 1px solid color-mix(in srgb, var(--color-primary) 50%, transparent);
}


/* -------------------------------------------------------- */
/* 🔹 Tertiary Button                                       */
/* -------------------------------------------------------- */
/* No border, no fill — text only with opacity fade         */

.btn--tertiary {
  background-color: transparent;
  color: var(--color-on-surface);
}

.btn--tertiary::after {
  display: none;
}

.btn--tertiary:hover {
  opacity: 0.8;
}

.btn--tertiary:active {
  opacity: 0.6;
}


/* -------------------------------------------------------- */
/* 🔹 Text Button                                           */
/* -------------------------------------------------------- */
/* Discrete action — label only, bodySmall size             */

.btn-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) 0;
  font-family: var(--font-family);
  font-size: var(--text-body-small);
  font-weight: 500;
  color: var(--color-primary);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.btn-text:hover {
  opacity: 0.8;
}

.btn-text:active {
  opacity: 0.6;
}

.btn-text svg {
  width: 16px;
  height: 16px;
}


/* -------------------------------------------------------- */
/* 🔹 Text Link Button                                      */
/* -------------------------------------------------------- */
/* Underlined, subtitle color, 44pt touch target            */

.btn-text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px var(--space-m);
  font-family: var(--font-family);
  font-size: var(--text-body-small);
  color: var(--color-subtitle);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  transition: opacity 0.15s ease;
}

.btn-text-link:hover {
  opacity: 0.8;
}

.btn-text-link:active {
  opacity: 0.6;
}


/* -------------------------------------------------------- */
/* 🔹 Inline modifier                                       */
/* -------------------------------------------------------- */
/* Shrink to content width instead of full-width            */

.btn--inline {
  width: auto;
}