@use '../../global/common' as global;

// -------------------------------
// ブロックエディターの管理UIの基本スタイル
// -------------------------------

.acms-block-editor-container {
  display: flex;
  height: 100%;
}

.acms-block-editor {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .acms-block-editor-content {
    flex: 1;
    padding: 25px 0;
    overflow-y: auto;
    background: var(--acms-block-editor-bg-color, var(--acms-block-editor-white));
  }
}

:where(.acms-block-editor .ProseMirror) {
  z-index: 0;
  padding: 0.375rem 1.375rem;
  color: var(--acms-block-editor-neutral-900);
  caret-color: #000;
  outline: 0;

  @include global.media-breakpoint-up(md) {
    padding: 0.875rem 3rem 0;
  }

  .selection {
    display: inline;
  }

  .selection,
  *::selection {
    background-color: var(--acms-block-editor-sellection);
  }

  &.resize-cursor {
    cursor: col-resize;
  }

  .ProseMirror-gapcursor {
    position: relative;
    width: 100%;
    max-width: 42rem;
    margin-right: auto;
    margin-left: auto;

    &::after {
      top: -1.5em;
      right: 0;
      left: 0;
      width: 100%;
      max-width: 42rem;
      margin-right: auto;
      margin-left: auto;
      border-top-color: rgb(0 0 0 / 40%);
    }
  }

  a {
    // エディター内のリンクをクリックできないようにする
    pointer-events: none;
  }
}

/**
 * ProseMirror Base Style の上書きのため :where で詳細度を下げないようにしています。
 * overflow-wrap / word-break / line-break については以下を参考にしています。
 * https://ics.media/entry/240411/
 */
.acms-block-editor .ProseMirror {
  line-break: strict; /* 禁則処理を厳格に適用 */
  word-break: normal; /* 単語の分割はデフォルトに依存 */
  overflow-wrap: anywhere; /* 収まらない場合に折り返す */
}

.acms-block-editor input::placeholder,
.acms-block-editor textarea::placeholder {
  color: rgb(0 0 0 / 50%);
}

.react-colorful {
  width: 100% !important;
}

.acms-block-editor [data-reference-hidden] {
  pointer-events: none;
  opacity: 0;
}

.acms-block-editor::-webkit-scrollbar {
  width: 0.25rem;
  height: 0.25rem;
  background-color: rgb(115 115 115 / 20%);
}

.acms-block-editor::-webkit-scrollbar-thumb {
  background-color: rgb(115 115 115 / 50%);
  border-radius: 9999px;
}

.acms-block-editor input[type='range'] {
  height: 0.625rem;
  appearance: none;
  background-color: var(--acms-block-editor-neutral-200);
  border: 0;
  border-radius: 0.25rem;
  transition: all 0.2s;

  &:active {
    background-color: var(--acms-block-editor-neutral-300);
  }

  &::-webkit-slider-thumb {
    width: 0.75rem;
    height: 1.25rem;
    appearance: none;
    background-color: var(--acms-block-editor-neutral-800);
    border-radius: 9999px;
    transition: all 0.2s;

    &:active {
      width: 1rem;
      height: 1.5rem;
      background-color: var(--acms-block-editor-neutral-900);
    }
  }
}

[data-theme='slash-command'] {
  width: 1000vw;
}

.acms-dropcursor {
  width: 4px;
  border-color: var(--acms-block-editor-dropcursor);
}

[data-theme='text-menu'] {
  max-width: calc(100% - 12px);
  background: white;

  .acms-block-editor-surface {
    background: unset;
  }
}

// カラム操作
// ---------------
:where(.acms-block-editor .ProseMirror) {
  [data-type='columns'] {
    &.has-focus [data-type='column'],
    &:hover [data-type='column'] {
      border-color: var(--acms-block-editor-gray-400);
    }
  }

  [data-type='column'].is-empty,
  [data-type='columns'] [data-type='column'].is-empty {
    padding: 8px;
    border: 1px dashed transparent;
    border-radius: var(--acms-block-editor-border-radius-sm);
    transition: border 0.2s ease;

    &:hover {
      border-color: var(--acms-block-editor-gray-800);
    }

    &:has(.is-active),
    &.has-focus {
      border-color: var(--acms-block-editor-gray-800);
    }
  }
}

// メディア操作
// ---------------
:where(.acms-block-editor .ProseMirror) {
  .node-imageUpload {
    padding: 0.5rem;
    border: 2px dotted rgb(0 0 0 / 10%);
    border-radius: 0.25rem;
    transition: border 160ms cubic-bezier(0.45, 0.05, 0.55, 0.95);

    &:hover {
      border-color: rgb(0 0 0 / 30%);
    }

    &:has(.is-active),
    &.has-focus {
      border-color: rgb(0 0 0 / 40%);
    }
  }

  .node-imageBlock {
    & img {
      overflow: hidden;
    }

    &:hover img {
      border-color: var(--acms-block-editor-neutral-100);
    }

    &:has(.is-active) img,
    &.has-focus img {
      border-color: var(--acms-block-editor-neutral-800);
    }
  }

  .ProseMirror-gapcursor + .node-imageBlock,
  .ProseMirror-gapcursor + .node-imageUpload {
    outline-color: var(--acms-block-editor-neutral-700);

    &:hover {
      outline-color: var(--acms-block-editor-neutral-600);
    }
  }
}

// テーブル操作
// ---------------
:where(.acms-block-editor .ProseMirror) {
  /* テーブル操作時用にデフォルトのスタイルを付与（テーマで上書きされる前提） */
  border-collapse: collapse;

  /* テーブル操作UI */

  .column-resize-handle {
    position: absolute;
    top: 0;
    right: -0.25rem;
    bottom: -2px;
    display: flex;
    width: 0.5rem;
    pointer-events: none;

    &::before {
      width: 1px;
      height: 100%;
      margin-left: 0.5rem;
      content: '';
      background-color: rgb(0 0 0 / 20%);
    }
  }

  .grip-icon {
    color: var(--acms-block-editor-gray-800);
    opacity: 0;
    transition: opacity 0.2s;
  }

  .grip-column,
  .grip-row {
    position: absolute;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: var(--acms-block-editor-gray-200);

    &:hover,
    &.selected {
      background-color: var(--acms-block-editor-gray-300);

      .grip-icon {
        opacity: 1;
      }
    }
  }

  .grip-column {
    top: calc(-1rem - 1px);
    left: 0;
    width: 100%;
    height: 1rem;
    border-left: 1px solid var(--acms-block-editor-gray-400);
    transition: all 0.2s;

    &.first {
      border-color: transparent;
    }
  }

  .grip-row {
    top: 0;
    left: calc(-1rem - 1px);
    width: 1rem;
    height: 100%;
    border-top: 1px solid var(--acms-block-editor-gray-400);

    &.first {
      border-color: transparent;
    }
  }
}

/* 上書きのため詳細度高め */
.acms-block-editor .ProseMirror {
  max-width: 100%;

  .grip-column,
  .grip-row {
    padding: 0;
    border: 0;
  }

  /* 行列操作用UIスペース */
  div:has(> table) {
    position: relative;
    padding-top: calc(1rem + 1px);
    padding-left: calc(1rem + 1px);

    /* 行列操作用UI出現時 */
    &:has(.ProseMirror-widget) {
      .grip-column,
      .grip-row {
        background-color: var(--acms-block-editor-gray-200);
      }
    }
  }

  table {
    td,
    th {
      position: relative;
      min-width: 100px; /* 入力欄が潰れないように */

      /* 行や列選択の時にセル内テキストがハイライトされてしまうのを防止 */
      &.selectedCell span.selection {
        background-color: transparent;
      }

      a.ProseMirror-widget {
        /* リセット */
        text-decoration: none;

        /* 選択時に操作用アイコンまでハイライトされないように */
        &::selection {
          background-color: transparent;
        }
      }

      /* セル操作中 */
      &.selectedCell,
      &.has-focus {
        background-color: var(--acms-block-editor-info-100);
      }
    }
  }
}

// 水平線操作
// ---------------
:where(.acms-block-editor .ProseMirror) {
  [data-type='horizontalRule'] {
    padding: 8px 0;
    cursor: pointer;
    border-radius: 0.125rem;
    transition: all 100ms ease-in-out;

    /* 操作時 */
    &.ProseMirror-selectednode,
    &:hover:not(&.ProseMirror-selectednode) {
      background-color: var(--acms-block-editor-sellection);
    }
  }
}
