/**
 * DGA Button style system (pure CSS) — aligned with Tailwind button() util
 *
 * Usage in HTML:
 *   class="btn btn--primary btn--md"
 *   class="btn btn--icon btn--subtle btn--sm"
 *   Form.io custom link button:
 *     .formio-component-customlinkbutton a.dga-btn-primary|secondary|outline
 *
 * Variants:  Neutral | Primary | Secondary / Secondary-Solid |
 *            Outline / Secondary-Outline | Secondary-OnColor | Subtle | Transparent
 * Sizes:     lg | md | sm  (+ btn--icon for icon-only)
 */

/* ========== Base (button baseButton) ========== */
.btn,
.formio-component-customlinkbutton a {
  display: inline-flex !important;
  justify-content: center;
  gap: 4px !important;
  margin: 0;
  white-space: nowrap;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  cursor: pointer;
  box-sizing: border-box;
  padding: 6px 12px;
}

/* focus-visible:outline-[2px] */
.btn:focus-visible,
.formio-component-customlinkbutton a:focus-visible {
  outline: 2px solid #161616 !important;
  outline-offset: 1px;
}

.btn:focus,
.formio-component-customlinkbutton a:focus {
  outline: none;
  box-shadow: none;
}

body.dark-theme .btn:focus-visible,
body.dark-theme .formio-component-customlinkbutton a:focus-visible {
  outline: 2px solid #ffffff !important;
  outline-offset: 1px;
}

.btn:disabled,
.btn[aria-disabled="true"],
.btn.is-disabled,
.formio-component-customlinkbutton a:disabled,
.formio-component-customlinkbutton a[aria-disabled="true"],
.formio-component-customlinkbutton a.is-disabled {
  pointer-events: none;
  cursor: not-allowed;
}

.btn svg,
.formio-component-customlinkbutton a svg {
  pointer-events: none;
  flex-shrink: 0;
}

.btn svg path[fill="white"],
.btn svg path[fill="#fff"],
.btn svg path[fill="#FFFFFF"],
.formio-component-customlinkbutton a svg path[fill="white"],
.formio-component-customlinkbutton a svg path[fill="#fff"],
.formio-component-customlinkbutton a svg path[fill="#FFFFFF"] {
  fill: currentColor;
}

.btn svg path[stroke="white"],
.btn svg path[stroke="#fff"],
.btn svg path[stroke="#FFFFFF"],
.formio-component-customlinkbutton a svg path[stroke="white"],
.formio-component-customlinkbutton a svg path[stroke="#fff"],
.formio-component-customlinkbutton a svg path[stroke="#FFFFFF"] {
  stroke: currentColor;
}

/* ========== Sizes (buttonSizes / buttonIconSizes) ========== */
/* lg: h-12 px-4 text-base leading-24 [&_svg]:size-6 */
.btn--lg {
  height: 48px;
  padding: 0 16px;
  font-size: 16px;
  line-height: 24px;
}

.btn--lg svg {
  width: 24px;
  height: 24px;
}

/* md: h-10 px-3 text-sm leading-20 [&_svg]:size-5 */
.btn--md {
  height: 40px;
  padding: 0 12px;
  font-size: 14px;
  line-height: 20px;
}

.btn--md svg {
  width: 20px;
  height: 20px;
}

/* sm: h-8 px-2 text-xs leading-18 [&_svg]:size-4 */
.btn--sm {
  height: 32px;
  padding: 0 8px;
  font-size: 12px;
  line-height: 18px;
}

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

.btn--icon.btn--lg {
  width: 48px;
  height: 48px;
  padding: 0;
}

.btn--icon.btn--md {
  width: 40px;
  height: 40px;
  padding: 0;
}

.btn--icon.btn--sm {
  width: 32px;
  height: 32px;
  padding: 0;
}

/* ========== Neutral ========== */
.btn--neutral {
  background-color: #0d121c;
  color: #ffffff;
  cursor: pointer;
}

.btn--neutral:hover {
  background-color: #1f2a37;
}

.btn--neutral:active {
  background-color: #4d5761;
}

.btn--neutral:disabled,
.btn--neutral[aria-disabled="true"],
.btn--neutral.is-disabled {
  background-color: #e5e7eb;
  color: #9da4ae;
  cursor: not-allowed;
}

body.dark-theme .btn--neutral {
  background-color: #0d121c;
  color: #ffffff;
}

body.dark-theme .btn--neutral:hover {
  background-color: #1f2a37;
}

body.dark-theme .btn--neutral:active {
  background-color: #4d5761;
}

body.dark-theme .btn--neutral:disabled,
body.dark-theme .btn--neutral[aria-disabled="true"],
body.dark-theme .btn--neutral.is-disabled {
  background-color: #384250;
  color: #9da4ae;
}

/* ========== Primary ========== */
.btn--primary,
.formio-component-customlinkbutton a.dga-btn-primary {
  background-color: #1b8354 !important;
  color: #ffffff !important;
  cursor: pointer;
}

.btn--primary:hover,
.formio-component-customlinkbutton a.dga-btn-primary:hover {
  background-color: #166a45 !important;
}

.btn--primary:active,
.formio-component-customlinkbutton a.dga-btn-primary:active {
  background-color: #104631 !important;
}

.btn--primary:disabled,
.btn--primary[aria-disabled="true"],
.btn--primary.is-disabled,
.formio-component-customlinkbutton a.dga-btn-primary:disabled,
.formio-component-customlinkbutton a.dga-btn-primary[aria-disabled="true"],
.formio-component-customlinkbutton a.dga-btn-primary.is-disabled {
  background-color: #b8e8cf;
  color: #6dd49b;
  cursor: not-allowed;
}

body.dark-theme .btn--primary,
body.dark-theme .formio-component-customlinkbutton a.dga-btn-primary {
  background-color: #1b8354;
  color: #ffffff !important;
}

body.dark-theme .btn--primary:hover,
body.dark-theme .formio-component-customlinkbutton a.dga-btn-primary:hover {
  background-color: #166a45;
}

body.dark-theme .btn--primary:active,
body.dark-theme .formio-component-customlinkbutton a.dga-btn-primary:active {
  background-color: #104631;
}

body.dark-theme .btn--primary:disabled,
body.dark-theme .btn--primary[aria-disabled="true"],
body.dark-theme .btn--primary.is-disabled,
body.dark-theme .formio-component-customlinkbutton a.dga-btn-primary:disabled,
body.dark-theme .formio-component-customlinkbutton a.dga-btn-primary[aria-disabled="true"],
body.dark-theme .formio-component-customlinkbutton a.dga-btn-primary.is-disabled {
  background-color: #384250;
  color: #9da4ae;
}

.formio-component-customlinkbutton a.dga-btn-primary svg path {
  fill: #fff
}

/* ========== Secondary / Secondary-Solid ========== */
.btn--secondary,
.btn--secondary-solid,
.formio-component-customlinkbutton a.dga-btn-secondary {
  background-color: #f3f4f6 !important;
  color: #161616;
}

.btn--secondary:hover,
.btn--secondary-solid:hover,
.formio-component-customlinkbutton a.dga-btn-secondary:hover {
  background-color: #e5e7eb !important;
}

.btn--secondary:active,
.btn--secondary-solid:active,
.formio-component-customlinkbutton a.dga-btn-secondary:active {
  background-color: #e5e7eb !important;
}

.btn--secondary:disabled,
.btn--secondary[aria-disabled="true"],
.btn--secondary.is-disabled,
.btn--secondary-solid:disabled,
.btn--secondary-solid[aria-disabled="true"],
.btn--secondary-solid.is-disabled,
.formio-component-customlinkbutton a.dga-btn-secondary:disabled,
.formio-component-customlinkbutton a.dga-btn-secondary[aria-disabled="true"],
.formio-component-customlinkbutton a.dga-btn-secondary.is-disabled {
  background-color: #e5e7eb;
  color: #9da4ae;
  cursor: not-allowed;
}

body.dark-theme .btn--secondary,
body.dark-theme .btn--secondary-solid,
body.dark-theme .formio-component-customlinkbutton a.dga-btn-secondary {
  background-color: #1f2a37 !important;
  color: #ffffff;
}

body.dark-theme .btn--secondary:hover,
body.dark-theme .btn--secondary-solid:hover,
body.dark-theme .formio-component-customlinkbutton a.dga-btn-secondary:hover {
  background-color: #4d5761;
}

body.dark-theme .btn--secondary:active,
body.dark-theme .btn--secondary-solid:active,
body.dark-theme .formio-component-customlinkbutton a.dga-btn-secondary:active {
  background-color: #4d5761;
}

body.dark-theme .btn--secondary:disabled,
body.dark-theme .btn--secondary[aria-disabled="true"],
body.dark-theme .btn--secondary.is-disabled,
body.dark-theme .btn--secondary-solid:disabled,
body.dark-theme .btn--secondary-solid[aria-disabled="true"],
body.dark-theme .btn--secondary-solid.is-disabled,
body.dark-theme .formio-component-customlinkbutton a.dga-btn-secondary:disabled,
body.dark-theme .formio-component-customlinkbutton a.dga-btn-secondary[aria-disabled="true"],
body.dark-theme .formio-component-customlinkbutton a.dga-btn-secondary.is-disabled {
  background-color: #384250;
  color: #9da4ae;
}

/* ========== Outline / Secondary-Outline ========== */
.btn--outline,
.btn--secondary-outline,
.formio-component-customlinkbutton a.dga-btn-outline {
  border-color: #d2d6db !important;
  background-color: transparent !important;
  color: #161616 !important;
}

.btn--outline:hover,
.btn--secondary-outline:hover,
.formio-component-customlinkbutton a.dga-btn-outline:hover {
  background-color: #f3f4f6 !important;
  border-color: #e5e7eb !important;
}

.btn--outline:active,
.btn--secondary-outline:active,
.formio-component-customlinkbutton a.dga-btn-outline:active {
  background-color: #e5e7eb !important;
  border-color: #d2d6db !important;
}

.btn--outline:disabled,
.btn--outline[aria-disabled="true"],
.btn--outline.is-disabled,
.btn--secondary-outline:disabled,
.btn--secondary-outline[aria-disabled="true"],
.btn--secondary-outline.is-disabled,
.formio-component-customlinkbutton a.dga-btn-outline:disabled,
.formio-component-customlinkbutton a.dga-btn-outline[aria-disabled="true"],
.formio-component-customlinkbutton a.dga-btn-outline.is-disabled {
  border-color: #e5e7eb !important;
  background-color: transparent;
  color: #9da4ae;
  cursor: not-allowed;
}

body.dark-theme .btn--outline,
body.dark-theme .btn--secondary-outline,
body.dark-theme .formio-component-customlinkbutton a.dga-btn-outline {
  border-color: #6c737f !important;
  background-color: transparent;
  color: #ffffff;
}

body.dark-theme .btn--outline:hover,
body.dark-theme .btn--secondary-outline:hover,
body.dark-theme .formio-component-customlinkbutton a.dga-btn-outline:hover {
  background-color: #1f2a37;
  border-color: #384250 !important;
}

body.dark-theme .btn--outline:active,
body.dark-theme .btn--secondary-outline:active,
body.dark-theme .formio-component-customlinkbutton a.dga-btn-outline:active {
  background-color: #4d5761;
  border-color: #6c737f !important;
}

body.dark-theme .btn--outline:disabled,
body.dark-theme .btn--outline[aria-disabled="true"],
body.dark-theme .btn--outline.is-disabled,
body.dark-theme .btn--secondary-outline:disabled,
body.dark-theme .btn--secondary-outline[aria-disabled="true"],
body.dark-theme .btn--secondary-outline.is-disabled,
body.dark-theme .formio-component-customlinkbutton a.dga-btn-outline:disabled,
body.dark-theme .formio-component-customlinkbutton a.dga-btn-outline[aria-disabled="true"],
body.dark-theme .formio-component-customlinkbutton a.dga-btn-outline.is-disabled {
  border-color: #384250 !important;
  background-color: transparent;
  color: #9da4ae;
}

/* ========== Secondary-OnColor (white outline — for colored / dark surfaces) ========== */
.btn--secondary-on-color {
  border-color: rgba(255, 255, 255, 0.4) !important;
  background-color: transparent;
  color: #ffffff !important;
}

.btn--secondary-on-color:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4) !important;
}

.btn--secondary-on-color:active {
  background-color: rgba(255, 255, 255, 0.4);
  border-color: rgba(255, 255, 255, 0.4) !important;
}

.btn--secondary-on-color:disabled,
.btn--secondary-on-color[aria-disabled="true"],
.btn--secondary-on-color.is-disabled {
  border-color: rgba(255, 255, 255, 0.4) !important;
  background-color: transparent;
  color: rgba(255, 255, 255, 0.4) !important;
  cursor: not-allowed;
}

/* ========== Subtle ========== */
.btn--subtle {
  background-color: transparent;
  color: #161616;
}

.btn--subtle:hover {
  background-color: #f3f4f6;
}

.btn--subtle:active {
  background-color: #e5e7eb;
}

.btn--subtle:disabled,
.btn--subtle[aria-disabled="true"],
.btn--subtle.is-disabled {
  background-color: transparent;
  color: #9da4ae;
  cursor: not-allowed;
}

body.dark-theme .btn--subtle {
  background-color: transparent;
  color: #ffffff;
}

body.dark-theme .btn--subtle:hover {
  background-color: #1f2a37;
}

body.dark-theme .btn--subtle:active {
  background-color: #4d5761;
}

body.dark-theme .btn--subtle:disabled,
body.dark-theme .btn--subtle[aria-disabled="true"],
body.dark-theme .btn--subtle.is-disabled {
  background-color: transparent;
  color: #9da4ae;
}

/* ========== Transparent ========== */
.btn--transparent {
  background-color: transparent;
  color: #161616;
}

.btn--transparent:hover {
  color: #166a45;
}

.btn--transparent:active {
  color: #104631;
}

.btn--transparent:disabled,
.btn--transparent[aria-disabled="true"],
.btn--transparent.is-disabled {
  background-color: transparent;
  color: #6dd49b;
  cursor: not-allowed;
}

body.dark-theme .btn--transparent {
  background-color: transparent;
  color: #ffffff;
}

body.dark-theme .btn--transparent:hover {
  color: #ffffff;
  background-color: #1f2a37;
}

body.dark-theme .btn--transparent:active {
  color: #ffffff;
  background-color: #4d5761;
}

body.dark-theme .btn--transparent:disabled,
body.dark-theme .btn--transparent[aria-disabled="true"],
body.dark-theme .btn--transparent.is-disabled {
  background-color: transparent;
  color: #9da4ae;
}