/* CaaT Academy Mermaid export controls
 * Load this file after assets/css/theme.css.
 */

body:not(.crl-home) .diagram-wrapper.caat-mermaid-export-host,
body:not(.crl-home) .caat-mermaid-export-frame.caat-mermaid-export-host {
  position: relative !important;
  padding-top: 64px !important;
}

.caat-mermaid-export-controls {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  padding: 0;
  pointer-events: auto;
}

.caat-mermaid-export-btn,
body:not(.crl-home) button.caat-mermaid-export-btn {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-width: 76px !important;
  width: auto !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 1px solid var(--caat-border-strong, rgba(15, 23, 42, 0.22)) !important;
  border-radius: 10px !important;
  color: var(--caat-text, #1f2937) !important;
  background: var(--caat-surface-solid, #ffffff) !important;
  background-image: none !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12) !important;
  font-family: var(--crl-font-main, Inter, system-ui, sans-serif) !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.035em !important;
  text-indent: 0 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  opacity: 1 !important;
  transition:
    color 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease,
    opacity 160ms ease !important;
}

html[data-theme="dark"] .caat-mermaid-export-btn,
html[data-theme="dark"] body:not(.crl-home) button.caat-mermaid-export-btn {
  color: #e8f8fa !important;
  border-color: rgba(101, 208, 220, 0.34) !important;
  background: #182833 !important;
  box-shadow: 0 9px 22px rgba(0, 0, 0, 0.3) !important;
}

.caat-mermaid-export-btn:hover,
body:not(.crl-home) button.caat-mermaid-export-btn:hover {
  color: var(--caat-heading, #102a32) !important;
  border-color: var(--caat-accent, #397784) !important;
  background: var(--caat-surface-hover, #edf7f8) !important;
  background-image: none !important;
  box-shadow: 0 11px 24px rgba(15, 23, 42, 0.16) !important;
  transform: translateY(-1px) !important;
}

html[data-theme="dark"] .caat-mermaid-export-btn:hover,
html[data-theme="dark"] body:not(.crl-home) button.caat-mermaid-export-btn:hover {
  color: #ffffff !important;
  border-color: rgba(101, 208, 220, 0.7) !important;
  background: #21404c !important;
  box-shadow: 0 12px 27px rgba(0, 0, 0, 0.36) !important;
}

.caat-mermaid-export-btn:focus-visible,
body:not(.crl-home) button.caat-mermaid-export-btn:focus-visible {
  outline: 3px solid rgba(57, 119, 132, 0.5) !important;
  outline-offset: 3px !important;
}

html[data-theme="dark"] .caat-mermaid-export-btn:focus-visible,
html[data-theme="dark"] body:not(.crl-home) button.caat-mermaid-export-btn:focus-visible {
  outline-color: rgba(101, 208, 220, 0.72) !important;
}

.caat-mermaid-export-btn:disabled,
body:not(.crl-home) button.caat-mermaid-export-btn:disabled,
.caat-mermaid-export-btn.is-busy,
body:not(.crl-home) button.caat-mermaid-export-btn.is-busy {
  cursor: wait !important;
  opacity: 0.56 !important;
  transform: none !important;
}

.caat-mermaid-export-btn.is-success,
body:not(.crl-home) button.caat-mermaid-export-btn.is-success {
  color: #0f5132 !important;
  border-color: rgba(25, 135, 84, 0.48) !important;
  background: #eaf8f0 !important;
}

html[data-theme="dark"] .caat-mermaid-export-btn.is-success,
html[data-theme="dark"] body:not(.crl-home) button.caat-mermaid-export-btn.is-success {
  color: #c8f7dc !important;
  border-color: rgba(74, 222, 128, 0.48) !important;
  background: #173428 !important;
}

.caat-mermaid-export-btn.is-error,
body:not(.crl-home) button.caat-mermaid-export-btn.is-error {
  color: #842029 !important;
  border-color: rgba(220, 53, 69, 0.48) !important;
  background: #fff0f1 !important;
}

html[data-theme="dark"] .caat-mermaid-export-btn.is-error,
html[data-theme="dark"] body:not(.crl-home) button.caat-mermaid-export-btn.is-error {
  color: #ffd5d9 !important;
  border-color: rgba(248, 113, 113, 0.5) !important;
  background: #422129 !important;
}

.caat-mermaid-export-btn__icon {
  display: inline-flex;
  width: 1em;
  height: 1em;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
}

.caat-mermaid-export-btn__label {
  display: inline-block;
  line-height: 1;
}

/* A wrapper is created only when a Mermaid element has no diagram-wrapper. */
.caat-mermaid-export-frame {
  box-sizing: border-box;
  width: 100%;
}

@media (max-width: 600px) {
  body:not(.crl-home) .diagram-wrapper.caat-mermaid-export-host,
  body:not(.crl-home) .caat-mermaid-export-frame.caat-mermaid-export-host {
    padding-top: 58px !important;
  }

  .caat-mermaid-export-controls {
    top: 10px;
    right: 10px;
    gap: 6px;
  }

  .caat-mermaid-export-btn,
  body:not(.crl-home) button.caat-mermaid-export-btn {
    min-width: 66px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 9px !important;
    font-size: 0.7rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .caat-mermaid-export-btn {
    transition: none !important;
  }
}