/* src/styles/ui/CodeEditor.module.css */
/* Common styles for code editor components (JSON, XML, etc.) */

/* Container */
.CodeEditor_container__f9SlJ {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  background-color: inherit;
  color: inherit;
  box-sizing: border-box;
  height: 100vh;
  overflow: auto;
}

/* Shared styles for editor content area */
.CodeEditor_inputContent___9MKM {
  display: flex;
  flex-direction: column;
  flex: none;
  position: relative;
  height: calc(100vh - 320px);
  min-height: calc(100vh - 320px);
  overflow: hidden;
}

/* Ace Editor wrapper styling */
.CodeEditor_aceEditor__6_3gO {
  /* Ace Editor will inherit our global CSS variables for typography */
  font-family: var(--font-family-mono) !important;
  font-size: var(--font-size-small) !important;
}

/* Error highlighting styles */
.CodeEditor_aceErrorWrapper__vcpuI .ace_error-line {
  position: absolute;
  background-color: rgba(255, 0, 0, 0.15);
  z-index: 5;
  width: 100% !important;
  pointer-events: none;
}

.CodeEditor_aceErrorWrapper__vcpuI .ace_error-position {
  position: absolute;
  background-color: rgba(255, 0, 0, 0.5);
  border-bottom: 2px solid red;
  z-index: 6;
  pointer-events: none;
}

/* Validation Error Message */
.CodeEditor_validationError__Bv9rC {
  margin-top: 10px;
  padding: 10px;
  border-left: 4px solid #ff0000;
  background-color: rgba(255, 0, 0, 0.05);
  color: #ff0000;
  font-family: monospace;
  white-space: pre-wrap;
  max-height: 200px;
  overflow-y: auto;
  animation: CodeEditor_fadeIn__AjWoB 0.3s ease-in;
}

/* Ribbon Styles */
.CodeEditor_ribbon__qwH3Y {
  display: flex;
  flex-wrap: wrap;
  background-color: var(--ribbon-background);
  padding: 8px;
  border-bottom: 1px solid var(--ribbon-border);
}

.CodeEditor_ribbonGroup__H9Sqq {
  display: flex;
  margin-right: 16px;
  align-items: center;
}

/* Button specific styling that extends the shared ribbonButton class */
.CodeEditor_ribbonButton__gGbpp {
  min-width: 92px;
}

.CodeEditor_ribbonButton__gGbpp .CodeEditor_icon___yB_D {
  margin-right: 6px;
}

/* Error Border */
.CodeEditor_errorBorder__yVfg_ {
  border: 1px solid var(--error-color);
}

/* Success button style */
.CodeEditor_successButton__hNhel {
  color: var(--accent-color);
}

/* Responsive Design */
@media (max-width: 768px) {
  .CodeEditor_ribbonGroup__H9Sqq {
    margin-right: 8px;
  }
}

@media (max-width: 480px) {
  .CodeEditor_ribbon__qwH3Y {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 4px;
  }
  
  .CodeEditor_ribbonGroup__H9Sqq {
    flex: 1 1 48%;
    margin-right: 0;
    margin-bottom: 8px;
  }
}

/* Animation definition */
@keyframes CodeEditor_fadeIn__AjWoB {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
/* src/styles/XmlInput.module.css */
/* Import shared styles */

/* Component-specific classes */
.XmlInput_xmlInputContainer__AoBlz {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  background-color: inherit;
  color: inherit;
  box-sizing: border-box;
  height: 100vh;
  overflow: auto;
}

.XmlInput_xmlInputRibbon__vaDWI {
  display: flex;
  flex-wrap: wrap;
  background-color: var(--ribbon-background);
  padding: 8px;
  border-bottom: 1px solid var(--ribbon-border);
}

.XmlInput_xmlInputRibbonGroup__fCzIz {
  display: flex;
  margin-right: 16px;
  align-items: center;
}

.XmlInput_xmlInputRibbonButton__jmb9u {
  min-width: 92px;
}

.XmlInput_xmlInputRibbonButton__jmb9u .XmlInput_icon__AtRuz {
  margin-right: 6px;
}

/* Define shared styles directly */
.XmlInput_inputContent__6xIdn {
  display: flex;
  flex-direction: column;
  flex: none;
  position: relative;
  height: calc(100vh - 320px);
  min-height: calc(100vh - 320px);
  overflow: hidden;
}

.XmlInput_aceEditor__sg0X5 {
  font-family: var(--font-family-mono) !important;
  font-size: var(--font-size-small) !important;
}

.XmlInput_validationError__ekQvY {
  margin-top: 10px;
  padding: 10px;
  border-left: 4px solid #ff0000;
  background-color: rgba(255, 0, 0, 0.05);
  color: #ff0000;
  font-family: monospace;
  white-space: pre-wrap;
  max-height: 200px;
  overflow-y: auto;
  animation: XmlInput_fadeIn__Z6e6J 0.3s ease-in;
}

.XmlInput_errorBorder__ItR7T {
  border: 1px solid var(--error-color);
}

.XmlInput_successButton__Ubiey {
  color: var(--accent-color);
}

/* Container for InfoSection to ensure proper display and spacing */
.XmlInput_infoSectionContainer__SKo6t {
  padding: 0 1rem 1rem;
  margin-bottom: 1rem;
  overflow: visible;
}

/* Animation definition for this component */
@keyframes XmlInput_fadeIn__Z6e6J {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}