@reference "../../css/globals.css";

/*
 * Cell can have many states:
 * - interactive (can hover, focus, click), while in edit mode
 * - stale
 * - error
 * - disabled
 * */
.marimo-cell {
  position: relative;
  border-radius: 10px;
  max-width: inherit;
  width: 100%;
  border: 1px solid var(--gray-4);

  @apply divide-y divide-(--gray-5);

  &:hover {
    border-color: var(--gray-6);
  }

  &:focus-visible {
    /* focus-visible outlines the entire cell body in black, but the cell's
     * body is an irregular shape because of pseudo-elements that extend
     * its hit-box / hover area. */
    outline: none;
  }

  &:has(.mo-ai-generated-cell)::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    pointer-events: none;
    opacity: 0.5;
    box-shadow: 0px 0px 10px 0px var(--cyan-9);
    z-index: 1;
  }

  &:has(.mo-ai-generated-cell.mo-ai-setup-cell)::before {
    border-radius: 2px;
  }

  /* Styling for cells marked for deletion by AI */
  &:has(.mo-ai-deleted-cell) {
    opacity: 0.7;
    position: relative;

    .output-area,
    .cm-gutters,
    .cm {
      background-color: var(--red-2);
    }

    /* Add a red glow to indicate deletion */
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 10px;
      pointer-events: none;
      opacity: 0.6;
      box-shadow: 0px 0px 10px 0px var(--red-9);
      z-index: 1;
    }

    /* Add strikethrough effect to the code */
    .cm-content {
      text-decoration: line-through;
      text-decoration-color: var(--red-9);
      text-decoration-thickness: 1px;
    }
  }

  &:focus-within {
    z-index: 20;
  }

  /* Hover z-index is higher than focus-within z-index
     * This is because you may hover for tooltip docs while
     * not focused in another cell.
     */

  &:hover {
    z-index: 30;
  }

  /* Interactive */

  &.interactive {
    /* Only restrain output length in edit mode. */

    .output-area,
    .console-output-area {
      max-height: 610px;
      overflow: auto;
    }

    /* Special case for particular components */

    .output-area:has(
      > .output:only-child > marimo-ui-element:only-child > marimo-table
    ) {
      padding: 0 0 5px;
      max-height: none;
      overflow: hidden;

      /* Flush table: remove border and configure edge padding via CSS variable */
      --marimo-table-edge-padding: 0.75rem;

      marimo-table::part(table-tabs) {
        margin-top: 0.25rem;
        border: none;
        border-radius: 0;
        border-top-left-radius: 9px;
      }

      marimo-table::part(table-wrapper) {
        border: none;
        border-radius: 0;
      }

      marimo-table::part(table-footer) {
        padding-inline: 0.25rem;
      }

      marimo-table::part(filter-pills) {
        padding-bottom: 0;
      }
    }

    & > :first-child {
      border-top-left-radius: 9px;
      border-top-right-radius: 9px;
    }

    & > :last-child {
      border-bottom-left-radius: 9px;
      border-bottom-right-radius: 9px;
    }

    &:focus-within {
      @apply shadow-md-solid shadow-shade;
    }

    .cm {
      border-radius: 8px;
    }
  }

  > [data-hidden="true"] ~ * {
    border-top: none;
  }

  > * ~ [data-hidden="true"] {
    border-top: none;
  }

  /* Stale styles for Cell */

  &.stale,
  &.disabled.stale {
    .output-area,
    .cm-gutters,
    .cm {
      background-color: var(--gray-2);
      opacity: 0.5;
    }
  }

  /* Disabled styles for Cell */

  &.disabled,
  &.disabled.has-error,
  &.disabled:hover,
  &.disabled.has-error:hover {
    .output-area,
    .cm-gutters,
    .cm {
      background-color: var(--gray-1);
      opacity: 0.5;
    }
  }

  &.disabled:hover {
    border-color: var(--gray-6);
  }

  /* Error styles for Cell, less precedence than needs run */
  &.has-error:not(.needs-run),
  &.error-outline {
    @apply border-error/20 border-1 divide-error/20 outline-1 outline-error/20;
  }

  &.has-error:not(.needs-run):hover {
    @apply border-error/30 outline-error/30;
  }

  &.has-error:not(.needs-run):focus-within {
    @apply border-1 outline-0 shadow-md-solid divide-error/20 shadow-error/20;
  }

  &.error-outline,
  &.error-outline:focus-within {
    box-shadow: 8px 8px 0 0 color-mix(in srgb, var(--error), transparent 80%);
    background-color: var(--red-2);
  }

  /* Needs Run */

  &.needs-run {
    /* TODO(akshayka): Can give this an outline to make more visible. */
    @apply border-stale border-1 divide-stale outline-1 outline-stale;

    &:hover {
      @apply border-action-foreground/30 outline-action-foreground/30;
    }

    &:focus-within {
      @apply border-1 outline-0 divide-stale shadow-md-solid shadow-stale;
    }

    &:focus-within .cm-editor {
      border: 1px solid transparent;
    }

    .RunButton {
      visibility: visible;
    }
  }

  /* Focus state */

  &.focus-outline {
    transition: all 0.6s;
    border-color: var(--blue-8) !important;

    /* custom shadow until our theme overrides can support colored shadow */
    @apply shadow-lg shadow-[var(--blue-8)];
  }

  /* Published - when its just the output */

  &.published {
    border: none;
    box-shadow: none;

    .output-area {
      /* flow-root interferes with margin collapsing, but appears to be unneeded
            * when cell outlines are hidden; clear:both is sufficient.
            *
            * if developers just use css-grid instead of float, this won't matter.
            * */
      display: block;
      padding-top: 0;
      padding-bottom: 0;
      border: none;
      box-shadow: none;

      /*
                do not restrict the dimensions when outlines are hidden，
                otherwise text with a scrollbar w/o a container looks weird
            */
      overflow: visible;
    }

    &:hover {
      border: none;
      box-shadow: none;
    }

    &:focus-within {
      transform: none;
    }
  }

  /* Borderless styles for Cell */
  &.borderless {
    border-color: transparent;

    & > * {
      border-bottom: none;
    }

    /* Apply the original styles */
    &:focus {
      border: 1px solid var(--gray-4);
    }
  }

  /* -------------------------- Shoulders/Buttons ---------------------------- */

  .shoulder-right {
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    position: absolute;
    left: calc(100% + 12px);
    width: fit-content;
    gap: 4px;
  }

  .shoulder-bottom {
    position: absolute;
    bottom: -2px;
    right: 2px;
  }

  @apply bg-background;
}

.dark .marimo-cell {
  @apply border-border;

  &:hover {
    border: 1px solid var(--gray-9);
  }

  &.needs-run:hover {
    @apply border-action-foreground/30 outline-action-foreground/30;
  }

  &.has-error:hover {
    @apply border-error/30 outline-error/30;
  }

  &.borderless {
    border-color: transparent;

    & > * {
      border-bottom: none;
    }

    /* Apply the original styles */
    &:hover {
      border: 1px solid var(--gray-4);
    }
  }

  &.published {
    border: none;

    &:hover {
      border: none;
      box-shadow: none;
    }
  }
}

#cell-setup,
#cell-setup .cm-editor,
#cell-setup .cm-gutter {
  background-color: var(--gray-2);
}

#App.disconnected {
  /* Background determined by disconnected gradient/noise. */

  .marimo-cell,
  .console-output-area,
  .cm .cm-gutters,
  .marimo-cell .cm-editor.cm-focused .cm-activeLineGutter,
  .marimo-cell .cm-editor.cm-focused .cm-activeLine,
  .marimo-cell .shoulder-button {
    background-color: transparent;
  }

  /* Hide when disconnected. */

  .cell-running-icon,
  .cell-queued-icon,
  .elapsed-time {
    visibility: hidden;
    animation: none;
  }

  .console-output-area {
    border-color: transparent;
  }
}

.tray {
  display: flex;
  position: relative;
  z-index: 1;

  /* Round the top of the code editor unless there is output above or the AI prompt input is open */
  &[data-has-output-above="false"] .cm-editor {
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
  }

  div[data-ai-input-open="true"] .cm-editor {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  &:last-child .cm-editor {
    border-bottom-left-radius: 9px;
    border-bottom-right-radius: 9px;
  }

  /* expand the hover area left and right */

  &::before,
  &::after {
    content: "";
    position: absolute;
    width: var(--gutter-width);
    max-width: var(--gutter-width);
    height: 100%;
  }

  &::before {
    left: calc(var(--gutter-width) * -1);
  }

  &::after {
    right: calc(var(--gutter-width) * -1);
  }
}

/* Hide tray when dragging a cell, to prevent messing up the measurements. */
.marimo-cell.is-moving {
  .tray::before,
  .tray::after {
    display: none;
  }
}

:root {
  /* Set a fixed gutter width to ensure the hover area is always wide enough */
  /* And make the gutter bigger when the window is super wide */
  --gutter-width: 100px;
}

/* ------------------------ CodeMirror Editor ----------------------------- */
.cm {
  width: 100%;
}

.cm-editor {
  font-size: var(--marimo-code-editor-font-size, 0.9rem);
}

.cm-lineNumbers {
  font-size: var(--marimo-code-editor-font-size, 0.9rem);
}

/* .marimo-cell is needed to take precedence over codemirror's generated class ... */
.marimo-cell .cm-editor {
  border: 1px solid transparent;
  padding: 3px;
  padding-right: 24px;

  &.cm-focused {
    .cm-activeLineGutter {
      background: #e2f2ff;
    }

    .cm-activeLine:not(.cm-error-line) {
      background: hsl(210deg 100% 50% / 3%);
    }
  }

  .cm-activeLine:not(.cm-error-line) {
    background: transparent;

    /* Soften the corners of the active-line highlight. */
    border-radius: 2px;
  }

  .cm-activeLineGutter {
    background: transparent;
  }

  .cm-content {
    font-size: var(--marimo-code-editor-font-size, 0.9rem);
    font-family: var(--monospace-font);
  }
}

.dark .marimo-cell .cm-editor.cm-focused .cm-activeLineGutter {
  background: #0e1e25;
}

.dark .marimo-cell .cm-editor.cm-focused .cm-activeLine {
  background: hsl(210deg 100% 2% / 20%);
}

/* ------------------------------ Output Areas ------------------------------ */

.output-area {
  max-width: inherit;
  width: 100%;
  padding: 1rem;

  /* Prevent floated elements from extending out of the output areas and into
     * the editor. */
  clear: both;
  display: flow-root;

  overflow: auto;
}

.marimo-output-stale,
.marimo-cell.stale .output-area.marimo-output-stale,
.marimo-cell.stale .console-output-area.marimo-output-stale {
  opacity: 0.8;
  filter: grayscale(50%);
  transition: 300ms;
  transition-delay: 200ms;
}

.marimo-output-stale.marimo-output-loading,
.marimo-cell.stale .output-area.marimo-output-stale.marimo-output-loading,
.marimo-cell.stale
  .console-output-area.marimo-output-stale.marimo-output-loading {
  opacity: 0.4;
  filter: grayscale(50%);
  transition: 300ms;
  transition-delay: 200ms;
}

.console-output-area {
  background-color: var(--gray-1);
}