/*
 * This file belongs to Hoist, an application development toolkit
 * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
 *
 * Copyright © 2026 Extremely Heavy Industries Inc.
 */
.xh-app .xh-input {
  .cm-editor {
    background-color: var(--xh-input-bg) !important;
    font-family: var(--xh-font-family-mono);
    font-size: var(--xh-font-size-px);
    line-height: calc(var(--xh-font-size-px) * 1.4);

    pre.cm-line {
      box-shadow: inset 0 0 0 0 rgba(16, 22, 26, 0.4);
      -webkit-box-shadow: inset 0 0 0 0 rgba(16, 22, 26, 0.4);
    }

    .xh-code-input--highlight {
      background-color: var(--xh-bg-highlight);
      &-active {
        background-color: var(--xh-bg-highlight-alt);
      }
    }
  }

  .cm-gutter {
    background-color: var(--xh-bg-alt);
  }
}

.xh-code-input {
  height: 100px;

  &.xh-input--invalid {
    div.cm-editor {
      border: var(--xh-form-field-invalid-border);
    }
  }

  &.xh-input--warning {
    div.cm-editor {
      border: var(--xh-form-field-warning-border);
    }
  }

  &.xh-input--info {
    div.cm-editor {
      border: var(--xh-form-field-info-border);
    }
  }

  &.xh-input-disabled {
    .cm-editor {
      background-color: var(--xh-input-disabled-bg);
      color: var(--xh-input-disabled-text-color);
    }
  }

  &__inner-wrapper {
    position: relative;
    flex: 1;

    & > .cm-editor {
      /*
       * Absolute positioning gives CodeMirror a fixed-height viewport so `.cm-scroller`
       * can handle overflow internally instead of growing with content.
       */
      position: absolute !important;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
  }

  &__action-buttons {
    position: absolute !important;
    bottom: var(--xh-scrollbar-size-px);
    right: var(--xh-scrollbar-size-px);
    z-index: 3; // render on top of code-mirror content to enable click

    .xh-button {
      padding: 0;
      min-width: 22px;
      min-height: 22px;
      color: var(--xh-text-color-muted);
    }
  }

  &__toolbar {
    background-color: var(--xh-bg-alt);
    z-index: 3; // render on top of code-mirror content to enable click

    .xh-button {
      min-width: 22px;
      min-height: 22px;
      color: var(--xh-text-color-muted);
    }
  }

  &__label {
    min-width: 60px;
    text-align: center;
  }

  &__dialog {
    width: 90vw;
    height: 90vh;
  }
}