@use "common/var" as *;

.m-editor-props-panel {
  height: 100%;
  position: relative;

  --props-style-panel-width: 300px;

  .m-editor-props-form-panel {
    padding-bottom: 10px;
    position: relative;
    height: 100%;
    box-sizing: border-box;

    .tmagic-design-scrollbar {
      height: 100%;
    }
  }

  .m-editor-props-property-panel {
    &.show-style-panel {
      padding-right: var(--props-style-panel-width);

      .m-editor-props-panel-src-icon {
        right: calc(15px + var(--props-style-panel-width));
      }
    }

    .tmagic-design-form {
      padding-right: 10px;
      padding-left: 10px;

      > .m-container-tab {
        > .tmagic-design-tabs {
          > .el-tabs__content {
            padding-top: 55px;
          }
          > .el-tabs__header.is-top {
            position: absolute;
            top: 0;
            width: 100%;
            background: #fff;
            z-index: 2;
          }
        }
      }
    }
  }

  .m-editor-props-style-panel {
    position: absolute;
    width: var(--props-style-panel-width);
    right: 0;
    top: 0;
    background: #fff;
    z-index: 12;

    $style-panel-title-height: 38px;

    .tmagic-design-scrollbar {
      height: calc(100% - $style-panel-title-height - 1px);
    }

    .m-editor-props-style-panel-title {
      text-align: center;
      font-size: 14px;
      font-weight: 600;
      padding: 0 5px;
      height: $style-panel-title-height;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 2px solid $border-color;
    }
  }

  .m-editor-props-panel-src-icon {
    position: absolute;
    right: 15px;
    bottom: 15px;
    z-index: 30;
    opacity: 0.5;

    &:hover {
      opacity: 1;
    }
  }

  .m-editor-props-panel-style-icon {
    position: absolute;
    right: 15px;
    bottom: 60px;
    z-index: 30;
    opacity: 0.5;

    &:hover {
      opacity: 1;
    }
  }

  .m-editor-props-panel-src-code.magic-code-editor {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
  }

  .m-editor-resizer {
    position: absolute;
    display: block;
    top: 0;
    right: var(--props-style-panel-width);
    z-index: 13;
  }

  &.small {
    .el-form-item__label {
      font-size: 12px;
    }

    .m-fieldset {
      legend {
        font-size: 12px;
      }
    }

    .el-tabs__item {
      font-size: 12px;
    }
  }

  .el-input__wrapper {
    border-radius: 0;
  }

  .m-fields-group-list {
    .tmagic-design-table {
      th {
        font-size: 12px;
      }
    }
  }
}

.m-editor-props-panel-popper {
  &.small {
    span,
    a,
    p {
      font-size: 12px;
    }
  }
}