@use "../../public/shared.module.scss";
@use "./code-editor-variables.module.scss";
@use "../editor-tabs-bar/editor-tabs-bar-variables.module.scss";

[class~="cm-lineNumbers"] {
  width: calc(#{code-editor-variables.$sharedGutterWidthVar} * 1px);
}

.code-editor {
  position: relative;
  display: flex;
  width: 100%;
  overflow-x: hidden;
  border-bottom-right-radius: 8px;

  [class~="cm-editor"] {
    [class~="cm-scroller"] {
      padding-bottom: calc(#{code-editor-variables.$editorPaddingBottomVar} * 1px);
    }
  }
}

.code-editor-with-tabs-bar {
  margin-top: editor-tabs-bar-variables.$tabHeight * 1px;
}

.container {
  position: absolute;
  flex: 1;
  background-color: shared.theme-var(--editor-background);
  width: 100%;
  height: 100%;

  & > div {
    height: 100%;
    outline: none !important;
  }
}

.code-editor-skeleton {
  display: flex;
  width: 100%;
  overflow: hidden;
  z-index: shared.$zIndex1;
  box-sizing: border-box;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px 0px 0px
    calc(
      (#{code-editor-variables.$sharedGutterWidthVar} + #{code-editor-variables.$sharedFoldGutterWidthVar} + 28) * 1px
    );
  gap: 20px;
  background: linear-gradient(
    90deg,
    shared.theme-var(--toolbar-background)
      calc((#{code-editor-variables.$sharedGutterWidthVar} + #{code-editor-variables.$sharedFoldGutterWidthVar}) * 1px),
    shared.theme-var(--editor-background) 0
  );

  @for $i from 1 through code-editor-variables.$skeletonChildren {
    & :nth-child(#{$i}) {
      flex: none;
      height: 20px;
      width: percentage(calc(random(20) / 100));
    }
  }
}

.code-editor-skeleton-with-tabs-bar {
  margin-top: editor-tabs-bar-variables.$tabHeight * 1px;
}

.container-without-gutter {
  margin-left: calc(
    (#{code-editor-variables.$sharedGutterWidthVar} + #{code-editor-variables.$sharedFoldGutterWidthVar}) * 1px
  );
}

.read-only-banner {
  position: absolute;
  width: 100%;
  bottom: 8px;
  z-index: shared.$zIndex2;
}
