$prefix-cls: "#{$namespace}-print-editor";

.#{$prefix-cls} {
  // 设计容器
  &-design {
    overflow: hidden;
    overflow: auto;

    :deep(.hiprint_rul_wrapper) {
      .h_img,
      .v_img {
        background-color: $color-white;
      }
    }
  }

  &__aliase-input {
    :deep(.el-input__inner) {
      color: $color-text-primary-text;
    }
  }

  &-layout-sider {
    background-color: var(--lj-color-gray-2);

    // 输入框样式调整
    :deep(.hiprint-option-item-field) {
      > input[type="number"],
      > input[type="text"],
      > select,
      > textarea,
      .minicolors > input[type="text"] {
        border-radius: $br-sm;
        background-color: $color-gray-1;

        display: inline-flex;
        flex-grow: 1;
        align-items: center;
        justify-content: center;
        padding: 1px 10px;
        background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
        background-image: none;
        border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
        cursor: text;
        transition: var(--el-transition-box-shadow);
        transform: translateZ(0);
        box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;

        --el-input-inner-height: calc(var(--el-input-height, 32px));
        appearance: none;
        -webkit-appearance: none;
        color: var(--el-input-text-color, var(--el-text-color-regular));
        font-size: inherit;
        height: var(--el-input-inner-height);
        outline: none;
        border: none;
        line-height: var(--el-input-inner-height);
        box-sizing: border-box;

        &::placeholder {
          color: $color-text-border;
        }
        &:focus,
        &:focus-visible {
          box-shadow: 0 0 0 1px $color-primary-500 inset !important;
        }
      }
      > textarea {
        --el-input-inner-height: calc(var(--el-input-height, 32px) - 14px);
        line-height: var(--el-input-inner-height);
      }
      .minicolors {
        > input[type="text"] {
          padding-left: 23px !important;
        }
        .minicolors-swatch {
          top: 0;
          bottom: 0;
          margin: auto;
        }
      }
    }
    :deep(.prop-tabs) {
      background-color: unset;
      .hiprint-option-items,
      .prop-tab-items .prop-tab-item {
        background-color: unset;
      }
      .prop-tab-items li.active {
        border-color: $color-primary-500;
        color: $color-primary-500;
      }
    }
    :deep(.hiprint-option-item-settingBtn) {
      background-color: $color-primary-500;
      cursor: pointer;
      width: 45%;
      border-radius: $br-sm;
      height: 24pt;

      &.hiprint-option-item-deleteBtn {
        background-color: $color-dust-red-5;
      }
    }
  }

  &__control {
    background-color: $color-gray-2;
    border-radius: $br-md;
  }
}

:deep(.hiprint-printPanel) {
  // 修改 页眉/页脚线 样式
  .hiprint-headerLine,
  .hiprint-footerLine {
    border-top: 1px dashed red !important;
  }

  .hiprint-headerLine:hover,
  .hiprint-footerLine:hover {
    border-top: 3px dashed red !important;
  }

  .hiprint-headerLine:hover:before {
    content: "页眉线";
    left: calc(50% - 18px);
    position: relative;
    background: #ffff;
    top: -12px;
    color: red;
    font-size: 12px;
  }

  .hiprint-footerLine:hover:before {
    content: "页脚线";
    left: calc(50% - 18px);
    position: relative;
    color: red;
    background: #ffff;
    top: -12px;
    font-size: 12px;
  }
}
:deep(.hi-pretty.p-default) {
  input:checked ~ .state label:after {
    background-color: $color-geek-blue-6 !important;
  }
}