@import '../../styles/variables';

@footerHeight: 52px;

.appEdit {
  height: calc(100% - @default-dataset-panel-height - 2px);
  :global {
    .ant-col-18 {
      overflow-x: hidden !important;
    }
    .ant-tabs-nav {
      height: @header-height;
      margin-bottom: 0 !important;
    }
    .ant-tabs-content-holder {
      overflow: auto;
      background-color: @bg-color;
    }
    .ant-tabs-tab {
      user-select: none;
      margin-left: 16px;
      .ant-tabs-tab-btn {
        font-size: 14px;
        margin-bottom: 2px;
        line-height: 16px;
      }
      i {
        font-size: 16px;
        margin-right: 4px;
      }
      &:first-child {
        margin-left: @panel-padding;
      }
    }
    .ant-tabs-tabpane,
    .ant-tabs-content,
    .ant-tabs-tabpane > div {
      height: 100%;
      overflow: auto;
    }

    .ant-empty {
      margin-top: 30px;
    }

    .editPanelContent {
      height: calc(100% - @footerHeight);
      overflow: auto;
    }

    .editPanelFooter {
      position: relative;
      display: flex !important;
      align-items: center;
      justify-content: center;
      height: @footerHeight;
      background-color: @bg-color;
      box-shadow: @box-shadow-base;
      .ant-btn {
        width: calc(100% - 48px);
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        :global {
          .dpiconfont {
            margin-right: 6px;
          }
        }
      }
      :global {
        .ant-tooltip-disabled-compatible-wrapper {
          width: 100%;
          height: 100%;
          display: flex !important;
          align-items: center;
          justify-content: center;
        }
      }
    }

    .editPanel {
      height: 100%;
      overflow: auto;
    }

    .editItem {
      margin: 9px @panel-padding;
      border-radius: @border-radius;
      .editName {
        width: calc(100% - 102px);
      }
      .editItemHeader {
        display: flex;
        align-items: center;
        height: 100%;
        width: 100%;
      }
      .editItemMore {
        display: inline-flex;
        align-items: center;
        opacity: 0;

        i {
          font-size: 18px;
        }

        :global {
          .dpiconfont,
          .ant-switch {
            margin-left: 6px;
          }
        }
      }

      &:hover {
        .editItemMore {
          opacity: 1;
        }
        :global {
          .ant-collapse-header {
            background-color: @bg-color-lighter;
          }
        }
      }
      :global {
        .ant-collapse-header {
          background-color: @bg-color-light;
          height: 50px;
          padding: 0 16px 0 0 !important;
          border-radius: 2px;
        }
        .ant-collapse-content-box {
          padding: 4px 8px;
          background-color: @bg-color-dark;
        }
        .ant-row {
          margin-bottom: 8px;
        }
        .ant-form-item-label {
          padding-bottom: 0;
        }
        .ant-slider {
          padding-top: 0;
        }
      }
    }
  }
}