@import '../../../styles';

.jse-text-mode > :first-child {
  border-radius: var(--jse-main-border-radius-top)
}

.jse-text-mode {
  flex: 1;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: var(--jse-background-color);
  border-radius: var(--jse-main-border-radius);

  &.no-main-menu {
    border-top: var(--jse-main-border);
  }

  .jse-contents {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    min-height: 0;

    border-left: var(--jse-main-border);
    border-right: var(--jse-main-border);

    &:last-child {
      border-bottom: var(--jse-main-border);
      border-radius: var(--jse-main-border-radius-bottom);
    }

    &.jse-hidden {
      visibility: hidden;
    }

    :global(.cm-editor) {
      flex: 1;
      overflow: hidden;

      :global(.cm-scroller) {
        font-family: var(--jse-font-family-mono);
        font-size: var(--jse-font-size-mono);
        line-height: var(--jse-line-height);
        color: var(--jse-delimiter-color);
      }

      :global(.cm-gutters) {
        background: var(--jse-panel-background);
        color: var(--jse-panel-color-readonly);
        border-right: none;
      }

      :global(.cm-activeLine),
      :global(.cm-activeLineGutter) {
        background: var(--jse-hover-background-color);
      }

      :global(.cm-selectionBackground) {
        background: var(--jse-selection-background-color);
      }

      :global(.cm-searchMatch) {
        background-color: var(--jse-search-match-color);
        outline: var(--jse-search-match-outline);
      }

      :global(.cm-searchMatch.cm-searchMatch-selected) {
        background-color: var(--jse-search-match-active-color);
        outline: var(--jse-search-match-active-outline);
      }

      :global(.cm-foldPlaceholder) {
        background: var(--jse-tag-background);
        color: var(--jse-tag-color);
        border: none;
        padding: 0 $padding;
      }

      :global(.cm-tooltip) {
        font-size: var(--jse-font-size);
        font-family: var(--jse-font-family);
        color: var(--jse-tooltip-color);
        background: var(--jse-tooltip-background);
        border: var(--jse-tooltip-border);
      }

      :global(.cm-diagnosticAction) {
        background: var(--jse-tooltip-action-button-color);
        background: var(--jse-tooltip-action-button-background);
      }

      :global(.cm-panels) {
        border-bottom: var(--jse-panel-border);
      }

      :global(.cm-search) {
        background: var(--jse-panel-background);
        color: var(--jse-panel-color);
        font-family: var(--jse-font-family);
        font-size: var(--jse-font-size);
      }

      :global(.cm-search input) {
        font-family: var(--jse-font-family);
        font-size: var(--jse-font-size-text-mode-search);
        color: var(--jse-input-color);
        border: var(--jse-input-border);
        background: var(--jse-input-background);
        margin-right: 2px;
      }

      :global(.cm-search button) {
        font-family: var(--jse-font-family);
        font-size: var(--jse-font-size-text-mode-search);

        color: var(--jse-panel-button-color);
        background: var(--jse-panel-button-background);

        border: none;
        cursor: pointer;
        text-transform: capitalize;
        padding: $padding-half $padding;
        margin: 0;

        &:hover {
          color: var(--jse-panel-button-color-highlight);
          background: var(--jse-panel-button-background-highlight);
        }
      }

      :global(.cm-search label) {
        font-family: var(--jse-font-family);
        font-size: var(--jse-font-size-text-mode-search);
        padding-left: $padding;
      }

      :global(.cm-search label input) {
        margin-right: 2px;
      }

      :global(.cm-search button[name='close']) {
        width: 32px;
        height: 32px;
        font-size: 24px;
        line-height: 24px;
        padding: 0;
        right: 0;
        top: -4px;
      }

      :global(.cm-cursor-primary) {
        border-color: var(--jse-text-color);
      }
    }

    .jse-loading-space {
      flex: 1;
    }

    .jse-loading {
      flex: 2;
      text-align: center;
      color: var(--jse-panel-color-readonly);
      box-sizing: border-box;
      font-family: var(--jse-font-family);
      font-size: var(--jse-font-size);
    }
  }
}