<template>
  <div
    class="editor-panel"
    id="editorPanel"
    :class="{ closed: !isOpen, mobile: isMobileDevice }"
    :style="{ height: isMobileDevice ? '70%' : isHeaderDisabled ? '100%' : 'calc(100% - 88px)'}"
    >
    <div class="sidebar-title">
      {{ type === 'text' ? $t('editorPanel.textProp') : $t('editorPanel.imageProp') }}
      <Close v-if="isMobileDevice" class="close-button" @click="closePanel" />
    </div>

    <div v-show="type === 'text'" class="edit-container">
      <div class="color">
        <div class="color-title">{{ $t('editorPanel.fontColor') }}</div>
        <div class="colors-container">
          <span class="cell-container">
            <span class="cell-outer" :class="{ active: areColorsSimilar(property.color, 'rgb(255, 0, 0)') }" @click="setActiveToolColor('rgb(255, 0, 0)')">
              <span class="cell red"></span>
            </span>
          </span>
          <span class="cell-container">
            <span class="cell-outer" :class="{ active: areColorsSimilar(property.color, 'rgb(255, 236, 102)') }" @click="setActiveToolColor('rgb(255, 236, 102)')">
              <span class="cell yellow"></span>
            </span>
          </span>
          <span class="cell-container">
            <span class="cell-outer" :class="{ active: areColorsSimilar(property.color, 'rgb(45, 119, 250)') }" @click="setActiveToolColor('rgb(45, 119, 250)')">
              <span class="cell blue"></span>
            </span>
          </span>
          <template v-if="isMobileDevice">
            <span class="cell-container">
              <span class="cell-outer" :class="{ active: areColorsSimilar(property.color, 'rgb(255, 246, 179)') }" @click="setActiveToolColor('rgb(255, 246, 179)')">
                <span class="cell" :style="{ background: 'rgb(255, 246, 179)' }"></span>
              </span>
            </span>
            <span class="cell-container">
              <span class="cell-outer" :class="{ active: areColorsSimilar(property.color, 'rgb(254, 191, 191)') }" @click="setActiveToolColor('rgb(254, 191, 191)')">
                <span class="cell" :style="{ background: 'rgb(254, 191, 191)' }"></span>
              </span>
            </span>
            <span class="cell-container">
              <span class="cell-outer" :class="{ active: areColorsSimilar(property.color, 'rgb(100, 188, 56)') }" @click="setActiveToolColor('rgb(100, 188, 56)')">
                <span class="cell" :style="{ background: 'rgb(100, 188, 56)' }"></span>
              </span>
            </span>
          </template>
          <div class="color-picker">
            <div class="preview" :style="{ backgroundColor: colorPickerValue }"></div>
            <n-color-picker
              to="#editorPanel"
              @complete="onColorPickerComplete"
              @update:value="onColorPickerUpdate"
              :value="colorPickerValue"
              :show-alpha="false"
            >
              <template #label><img src="../Icon/colorful.svg" alt="colorPicker"></template>
            </n-color-picker>
          </div>
        </div>
      </div>

      <div class="opacity">
        <div class="opacity-title">{{ $t('opacity') }}</div>
        <div class="tool">
          <n-slider v-model:value="property.opacity" :tooltip="false" :step="1" :max="100" :min="0" class="width-slider" :on-dragend="onDragend">
            <template #thumb>
              <Slider />
            </template>
          </n-slider>
          <n-select v-model:value="opacityLabel" :options="opacityOptions" @update:value="handleOpacityBlur" to="#editorPanel">
            <template #arrow><ArrowDownA /></template>
          </n-select>
        </div>
      </div>

      <div class="text">
        <div class="text-title">{{ $t('font') }}</div>
        <n-select v-model:value="property.fontFamily" :options="fontFamilyOptions" to="#editorPanel" class="text-family">
          <template #arrow><ArrowDownA /></template>
        </n-select>
        <div class="content-block">
          <n-select v-model:value="property.fontStyle" :options="fontStyleOptions" to="#editorPanel" class="font-style-select">
            <template #arrow><ArrowDownA /></template>
          </n-select>
          <n-select v-model:value="property.fontSize" :options="fontSizeOptions" to="#editorPanel" class="font-size-select">
            <template #arrow><ArrowDownA /></template>
          </n-select>
        </div>

        <div class="text-align">
          <div :class="{ active: property.alignType === 2 }" @click="changeAlign(2)">
            <span :class="{ border: property.alignType === 3 }">
              <TextLeft />
            </span>
          </div>
          <div :class="{ active: property.alignType === 5 }" @click="changeAlign(5)">
            <span :class="{ border: property.alignType === 2 }">
              <TextCenter />
            </span>
          </div>
          <div :class="{ active: property.alignType === 3 }" @click="changeAlign(3)">
            <span>
              <TextRight />
            </span>
          </div>
        </div>
      </div>

      <div class="spacing">
        <div class="spacing-title">{{ $t('editorPanel.spacing') }}</div>
        <div class="block">
          <div>
            <LineSpacing />
            <n-input-number v-model:value="property.lineSpacing" @update:value="handleLineSpacingChange" :placeholder="$t('editorPanel.lineSpacing')" min="1" max="10" :step="0.5" :update-value-on-input="false">
              <template #minus-icon><div class="arrow down"></div></template>
              <template #add-icon><div class="arrow up"></div></template>
            </n-input-number>
          </div>
          <div>
            <ParagraphSpacing />
            <n-input-number v-model:value="property.paragraphSpacing" @update:value="handleParaSpacingChange" :placeholder="$t('editorPanel.paragraphSpacing')" min="0" max="10" :step="0.5" :update-value-on-input="false">
              <template #minus-icon><div class="arrow down"></div></template>
              <template #add-icon><div class="arrow up"></div></template>
            </n-input-number>
          </div>
          <div>
            <CharacterSpacing />
            <n-input-number v-model:value="property.characterSpacing" @update:value="handleCharSpacingChange" :placeholder="$t('editorPanel.characterSpacing')" min="0" max="10" :step="0.5" :update-value-on-input="false">
              <template #minus-icon><div class="arrow down"></div></template>
              <template #add-icon><div class="arrow up"></div></template>
            </n-input-number>
          </div>
        </div>
      </div>
    </div>



    <div v-show="type === 'image'" class="edit-container">
      <div class="overview">
        <img v-show="imageUrl" :src="imageUrl">
      </div>
      <div class="rotate">
        <div class="content-title">{{ $t('editorPanel.rotate') }}</div>
        <div class="buttons">
          <div @click="setProperty('rotate', '-90')" :title="$t('editorPanel.rotateLeft')">
            <RotateImageLeft />{{ $t('editorPanel.rotateLeft') }}
          </div>
          <div @click="setProperty('rotate', '90')" :title="$t('editorPanel.rotateRight')">
            <RotateImageRight />{{ $t('editorPanel.rotateRight') }}
          </div>
        </div>
      </div>

      <div class="flips">
        <div class="content-title">{{ $t('editorPanel.flip') }}</div>
        <div class="buttons">
          <div @click="setProperty('flip', 'x')" :title="$t('editorPanel.flipHorizontal')">
            <span>
              <FlipX />
            </span>
          </div>
          <div @click="setProperty('flip', 'y')" :title="$t('editorPanel.flipVertical')">
            <span>
              <FlipY />
            </span>
          </div>
        </div>
      </div>

      <div class="opacity">
        <div class="opacity-title">{{ $t('opacity') }}</div>
        <div class="tool">
          <n-slider v-model:value="property.opacity" :tooltip="false" :step="1" :max="100" :min="0" :on-dragend="onDragend" class="width-slider">
            <template #thumb>
              <Slider />
            </template>
          </n-slider>
          <n-select v-model:value="opacityLabel" :options="opacityOptions" @update:value="handleOpacityBlur" to="#editorPanel">
            <template #arrow><ArrowDownA /></template>
          </n-select>
        </div>
      </div>

      <div class="tools">
        <div class="content-title">{{ $t('editorPanel.tools') }}</div>
        <div class="buttons">
          <div @click="setProperty('tool', 'replace')" :title="$t('editorPanel.replace')">
            <span>
              <ReplaceImage />
            </span>
          </div>
          <div @click="setProperty('tool', 'export')" :title="$t('editorPanel.export')">
            <span>
              <ExportImage />
            </span>
          </div>
          <div @click="setProperty('tool', 'crop')" :title="$t('editorPanel.crop')">
            <span>
              <CropImage />
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, computed, watch, reactive, getCurrentInstance } from 'vue'
  import { useViewerStore } from '@/stores/modules/viewer'
  import { NSlider, NSelect, NColorPicker, NInputNumber } from 'naive-ui'
  import core from '@/core'
  import { areColorsSimilar } from '@/helpers/utils'
  import { isMobileDevice } from '@/helpers/device'

  const { isHeaderDisabled } = defineProps(['isHeaderDisabled'])
  const useViewer = useViewerStore()
  const isOpen = computed(() => useViewer.isElementOpen('contentEditorPanel'))
  const type = computed(() => useViewer.getContentEditorType)
  const rightPanelButtonDisabled = computed(() => useViewer.getRightPanelButtonDisabled)
  const customFonts = computed(() => useViewer.getCustomFonts)

  const instance = getCurrentInstance().appContext.app.config.globalProperties
  const $t = instance.$t

  let property = reactive({
    color: 'rgb(0, 0, 0)',
    opacity: 100,
    fontFamily: 'Helvetica',
    fontStyle: 0,
    alignType: 2,
    fontSize: 14,
    lineSpacing: 1,
    paragraphSpacing: 0,
    characterSpacing: 0
  })

  let opacityLabel = ref('100%')
  const opacityArr = [25, 50, 75, 100]
  const opacityOptions = opacityArr.map(opacity => {
    return {
      label: `${opacity}%`,
      value: `${opacity}%`,
      class: 'edit-select'
    }
  })
  const loadFont = (data) => {
    const fontFamily = data.fontFamily
    useViewer.setCustomFonts(fontFamily)
  }

  core.addEvent('LoadFont', loadFont)
  watch(() => customFonts.value, (newValue, oldValue) => {
    fontFamilyOptions.value = setFontMap(newValue)
  }, { deep: true })

  const setFontMap = (fonts) => {
    if (fonts.length) {
      return fonts.map(font => {
        return {
          label: font,
          value: font,
          class: 'edit-select'
        }
      })
    }
  }

  const fontFamilyOptions = ref([])
  fontFamilyOptions.value = setFontMap(customFonts.value)
  const fontStyleOptions = computed(() => {
    return [{
      label: $t('regular'),
      value: 0,
      class: 'edit-select'
    }, {
      label: $t('bold'),
      value: 1,
      class: 'edit-select'
    }, {
      label: $t('boldOblique'),
      value: 3,
      class: 'edit-select'
    }, {
      label: $t('oblique'),
      value: 2,
      class: 'edit-select'
    }]
  })
  const fontSizeArr = [12, 14, 16, 20, 24, 28]
  const fontSizeOptions = fontSizeArr.map(fontSize => {
    return {
      label: `${fontSize} pt`,
      value: fontSize,
      class: 'edit-select'
    }
  })

  const imageUrl = ref('')
  const colorPickerValue = ref('rgb(0, 0, 0)')

  // 打开右侧属性面板时，关闭视图面板
  watch(() => isOpen.value, (newValue, oldValue) => {
    if (newValue) {
      useViewer.closeElement('pageModePanel')
    }
  })

  // 拖动透明度滑块结束时，更新透明度值
  const onDragend = () => {
    core.setContentEditorProperty(type.value, { opacity: property.opacity })
  }

  watch(() => property.fontFamily, (newValue, oldValue) => {
    core.setContentEditorProperty(type.value, { fontFamily: newValue })
  })

  watch(() => property.fontStyle, (newValue, oldValue) => {
    core.setContentEditorProperty(type.value, { fontStyle: newValue })
  })

  watch(() => property.opacity, (newValue, oldValue) => {
    opacityLabel.value = newValue + '%'
  })

  watch(() => property.fontSize, (newValue, oldValue) => {
    if (typeof newValue === 'number') {
      core.setContentEditorProperty(type.value, { fontSize: property.fontSize })
    }
  })

  const setActiveToolColor = (color) => {
    property.color = color
    core.setContentEditorProperty(type.value, { color })
  }

  const handleOpacityBlur = () => {
    property.opacity = Number.isNaN(Number.parseInt(opacityLabel.value)) ? 100 : Number.parseInt(opacityLabel.value)
    core.setContentEditorProperty(type.value, { opacity: property.opacity })
  }

  const changeAlign = (value) => {
    property.alignType = value
    core.setContentEditorProperty(type.value, { alignType: property.alignType })
  }

  const handleLineSpacingChange = (value) => {
    if (value === null) return
    property.lineSpacing = Math.round(value * 2) / 2
    core.setContentEditorProperty(type.value, { lineSpacing: property.lineSpacing })
  }

  const handleParaSpacingChange = (value) => {
    if (value === null) return
    property.paragraphSpacing = Math.round(value * 2) / 2
    core.setContentEditorProperty(type.value, { paragraphSpacing: property.paragraphSpacing })
  }

  const handleCharSpacingChange = (value) => {
    if (value === null) return
    property.characterSpacing = Math.round(value * 2) / 2
    core.setContentEditorProperty(type.value, { characterSpacing: property.characterSpacing })
  }

  const updateProperty = (props) => {
    for (const item in props) {
      if (item === 'type') {
        useViewer.setContentEditorType(props[item])
      }
      if (item === 'isOpen') {
        props.isOpen ? useViewer.openElement('contentEditorPanel') : useViewer.closeElement('contentEditorPanel')
      }
      if (item === 'imageUrl') {
        imageUrl.value = props[item]
      }

      for (const key in property) {
        if (item === key) {
          property[key] = props[item]

          if (item === 'fontSize' && !fontSizeArr.includes(props.fontSize)) {
            property.fontSize = props.fontSize + ' pt'
          }
          if (item === 'color') {
            colorPickerValue.value = props.color
          }
        }
      }
    }
  }
  core.addEvent('contentPropertyChange', updateProperty)

  const setProperty = (key, value) => {
    core.setContentEditorProperty(type.value, { [key]: value })
  }

  // 颜色选择器选中颜色事件
  const onColorPickerComplete = (value) => {
    if (areColorsSimilar(value, property.color)) return
    setActiveToolColor(value)
  }

  // 颜色选择器颜色改变事件
  const onColorPickerUpdate = (value) => {
    colorPickerValue.value = value
  }

  const closePanel = () => {
    useViewer.closeElement('contentEditorPanel')
  }
</script>

<style lang="scss" scoped>
  .editor-panel {
    position: fixed;
    right: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    height: calc(100% - 88px);
    transition: transform .3s ease-in-out;
    background-color: var(--c-side-bg);
    border-left: 1px solid var(--c-side-header-border);
    &.closed {
      transform: translateX(100%);
    }
    .sidebar-title {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 700;
      line-height: 36px;
      text-align: center;
      color: var(--c-side-title);
      background: var(--c-header-bg);
    }
    .edit-container {
      padding: 16px;
      .color {
        .color-title {
          font-family: Helvetica;
          font-size: 14px;
          font-weight: 700;
          line-height: 40px;
          color: var(--c-side-title);
        }
        .colors-container {
          padding: 0;
          border: none;
          .cell-container {
            padding: 2px;
            .cell-outer {
              width: 28px;
              height: 28px;
              border: 1px solid transparent;
              display: flex;
              align-items: center;
              justify-content: center;
              .cell {
                width: 24px;
                height: 24px;
              }
              .while {
                border: 0.93px solid #DADBDE;
                overflow: hidden;
                position: relative;
                background-color: #ffffff;
                &::before {
                  content: '';
                  width: 125%;
                  height: 2.3px;
                  position: absolute;
                  top: 50%;
                  background: #FA1E5D;
                  transform: rotate(-45deg);
                }
              }
            }
            .cell-outer.active {
              border: 1px solid var(--c-header-circle-bg);

              .cell {
                width: 22px;
                height: 22px;
              }
            }
          }
          .cell-container + .cell-container {
            margin-left: 8px;
          }
        }
      }
      
      .opacity {
        .opacity-title {
          margin-top: 12px;
          font-size: 14px;
          font-weight: 700;
          line-height: 32px;
          color: var(--c-side-title);
        }
        .tool {
          display: flex;
          align-items: center;
          height: 32px;
          ::v-deep(.n-slider.width-slider) {
            margin-left: 0px;
            width: 60%;
            .n-slider-rail {
              height: 2px;
              border-radius: 0;
              .n-slider-rail__fill {
                background-color: #0078D7;
                border-radius: 0;
              }
            }
            .n-slider-handles {
              left: 0;
              right: 0;
            }
          }
          ::v-deep(.n-select) {
            max-width: 35%;
            margin-left: 5%;
          }
          select {
            max-width: 35%;
            margin-left: 5%;
          }
        }
      }

      .text {
        margin-top: 12px;
        .text-title {
          margin-bottom: 4px;
          font-size: 14px;
          font-weight: 700;
          line-height: 32px;
          color: var(--c-side-title);
        }
        .text-family {
          width: 100%;
        }
        .content-block {
          margin-top: 8px;
          height: 28px;
          width: 100%;
          .font-style-select {
            width: 60%;
          }
          .font-size-select {
            width: 35%;
            margin-left: 5%;
          }
        }
        .text-align {
          margin-top: 8px;
          display: inline-flex;
          border: 1px solid #0000001F;
          background: var(--c-right-side-content-fillbox-bg);
          div {
            padding: 8px 0px;
            width: 48px;
            height: 32px;
            text-align: center;
            cursor: pointer;
            span {
              display: inline-block;
              font-size: 0;
              width: 100%;
              svg {
                color: var(--c-text);
              }
            }
            .border {
              border-right: var(--c-edit-right-page) 1px solid;
            }
          }
          .active {
            background: #DDE9FF;
            svg {
              color: #43474D;
            }
          }
        }
      }

      .spacing {
        .spacing-title {
          margin-top: 12px;
          margin-bottom: 4px;
          font-size: 14px;
          font-weight: 700;
          line-height: 32px;
        }
        .block {
          display: grid;
          grid-row-gap: 8px;
          grid-column-gap: 22px;
          grid-template-columns: repeat(2, minmax(103px, 1fr));
          > div {
            display: inline-flex;
            align-items: center;
            > svg {
              min-width: 20px;
              margin-right: 8px;
            }
          } 
        }
        .arrow {
          border: solid var(--c-arrow-down-icon);
          border-width: 0 1.5px 1.5px 0;
          padding: 2px;
          &.up {
            margin-top: 13px;
            transform: rotate(-135deg);
            -webkit-transform: rotate(-135deg);
          }
          &.down {
            margin-bottom: 13px;
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
          }
        }
      }

      ::v-deep(.n-input-number) {
        .n-input {
          height: 28px;
          border-radius: 1px;
          background-color: var(--c-right-side-content-fillbox-bg);
          --n-border: 1px solid var(--c-right-side-content-fillbox-border) !important;
          --n-text-color: var(--c-text) !important;
          --n-height: 28px !important;
          --n-bezier: unset !important;
          --n-border-active: none !important;
          --n-border-focus: none !important;
          --n-border-hover: none !important;
          --n-box-shadow-active: none !important;
          --n-box-shadow-focus: none !important;

          .n-input-wrapper {
            padding-left: 8px;
            padding-right: 4px;
            .n-input__suffix {
              flex-direction: column-reverse;
            }
          }
        }
      }

      select {
        height: 28px;
        padding: 6px 8px;
        font-size: 14px;
        line-height: 16px;
        border-radius: 1px;
        background: var(--c-right-side-content-fillbox-bg);
        border: 1px solid var(--c-right-side-content-fillbox-border);
        color: var(--c-text);
      }

      ::v-deep(.n-select) {
        display: inline-block;
        .n-base-selection {
          min-height: 28px;
          border-radius: 1px;
          --n-bezier: unset !important;
          --n-border-active: none !important;
          --n-border-focus: none !important;
          --n-border-hover: none !important;
          --n-box-shadow-active: none !important;
          --n-box-shadow-focus: none !important;
          .n-base-selection-label {
            height: 28px;
            background: var(--c-right-side-content-fillbox-bg);

            .n-base-selection-input, .n-base-selection-input__content {
              color: var(--c-text);
            }
          }
          .n-base-selection__border {
            border: 1px solid var(--c-right-side-content-fillbox-border);
          }
        }
        input {
          font-size: 14px;
          line-height: 16px;
          padding: 0 8px;
          background: var(--c-right-side-content-fillbox-bg);
          caret-color: transparent;
        }
        .n-base-selection-overlay__wrapper {
          color: var(--c-text);
        }
        .n-base-selection .n-base-suffix .n-base-suffix__arrow {
          color: var(--c-arrow-down-icon);
        }
      }

      .overview {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 80px;
        border: 1px solid #E2E3E6;
        background: var(--c-right-side-content-fillbox-bg);

        img {
          max-width: 90%;
          max-height: 90%;
        }
      }

      .tools,
      .flips {
        margin-top: 12px;
        .content-title {
          font-size: 14px;
          font-weight: 700;
          line-height: 32px;
          color: var(--c-side-title);
        }

        .buttons {
          margin-top: 8px;
          display: inline-flex;
          border: 1px solid #0000001F;
          background: var(--c-right-side-content-fillbox-bg);

          :hover {
            background: #DDE9FF;
            svg {
              color: #43474D;
            }
          }

          div {
            padding: 8px 0px;
            width: 48px;
            height: 32px;
            text-align: center;
            cursor: pointer;
            span {
              display: inline-block;
              font-size: 0;
              width: 100%;
              svg {
                color: var(--c-text);
              }
            }
            & + div span {
              border-left: var(--c-edit-right-page) 1px solid;
            }
          }
        }
      }

      .rotate {
        margin-top: 12px;

        .content-title {
          font-size: 14px;
          font-weight: 700;
          line-height: 32px;
          color: var(--c-side-title);
        }

        .buttons {
          margin-top: 8px;
          display: inline-flex;
          width: 100%;
          gap: 5px;

          div {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
            padding: 8px 0px;
            height: 32px;
            text-align: center;
            cursor: pointer;
            border: 1px solid #0000001F;
            border-radius: 1px;
            background: var(--c-right-side-content-fillbox-bg);

            &:hover {
              background: #DDE9FF;
              svg {
                color: #43474D;
              }
            }

            svg {
              margin-right: 8px;
            }
          }
        }
      }
    }
  }

  .editor-panel.mobile {
    background-color: var(--c-side-header-bg);
    border-left: none;
    bottom: 0;
    border-radius: 10px 10px 0 0;
    box-shadow: 0px 4px 32px 0px var(--c-doc-editor-popup-shadow);
    overflow: hidden;

    &.closed {
      transform: translateY(100%);
      box-shadow: none;
    }

    .close-button {
      position: absolute;
      right: 14px;
    }

    .edit-container {
      padding-bottom: 80px;
      overflow-y: auto;

      .tools .buttons :hover,
      .flips .buttons :hover,
      .rotate .buttons div:hover {
        background: none;
      }
    }
  }

  @media screen and (max-width: 640px) {
    .editor-panel {
      width: 100vw;

      .sidebar-title {
        border-bottom: 1px solid rgba($color: #000000, $alpha: 0.12);
      }

      .edit-container {
        .text .text-title, .spacing .spacing-title {
          margin-bottom: 0;
          line-height: 40px;
        }

        .opacity .tool .n-select,
        .text .content-block .font-size-select {
          max-width: 72px;
        }

        .opacity .tool .n-slider.width-slider {
          flex: 1;
        }

        .text .content-block {
          display: flex;

          .font-style-select {
            flex: 1;
          }
        }
      }
    }

    ::v-deep(.n-select) .n-base-selection .n-base-selection-label .n-base-selection-input {
      padding: 0 20px 0 8px;
    }
  }
  @media screen and (min-width: 641px) {
    .editor-panel {
      width: 260px;
    }
  }
</style>
<style lang="scss">
  .n-base-select-menu {
    .n-base-select-option {
      &.n-base-select-option--selected {
      color: var(--c-text);
      }
      .n-base-select-option__check {
        color: var(--c-header-text-theme-active) !important;
        &.fade-in-scale-up-transition-leave-active {
          display: none;
        }
      }
      &:active {
        color: var(--c-text);
      }
      &.n-base-select-option--show-checkmark {
        padding-right: calc(var(--n-option-padding-right) + 10px);
      }
    }
    .edit-select {
      background: var(--c-right-side-content-fillbox-bg);
      color: var(--c-text);
    }
  }

  .color-picker {
    display: flex;
    align-items: center;
    margin-left: 8px;
    padding: 0 3px;
    border: 1px solid #0000001F;
    border-radius: 20px;

    .preview {
      margin-right: 8px;
      width: 24px;
      height: 24px;
      background-color: #000000;
      border-radius: 50%;
    }
  }

  .n-color-picker {
    width: 24px;
    height: 24px;

    .n-color-picker-trigger {
      border-radius: 50%;
      border: none;

      .n-color-picker-trigger__fill {
        border-radius: 50%;
        overflow: hidden;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;

        div {
          display: none;
        }

        .n-color-picker-trigger__value {
          display: flex;
          align-items: center;
          position: unset;
        }
      }
    }
  }

  .n-input {
    
    &:not(.n-input--disabled) {

      &:hover .n-input__state-border {
        border-color: var(--c-blue-1);
      }

      &.n-input--focus .n-input__state-border {
        border-color: var(--c-blue-1);
        box-shadow: 0 0 0 2px var(--c-right-side-list-item-bg);
      }
    }

    .n-input__input-el {
      caret-color: var(--c-blue-1);
      text-decoration: none !important;
    }
  }
</style>
