@import "~assets/less/variable";

.grid {
  margin-top: -16px;
}

.unit {
  height: 120px;
  background-color: @body-background;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center center;
  margin-bottom: 20px;
  border-radius: 2px;
  box-shadow: @block-box-shadow;
  transform: translate3d(0, 0, 0);
  transition: transform 200ms linear,
              box-shadow 200ms linear,
              background-size 500ms linear;
  position: relative;
  cursor: pointer;

  &:hover {
    background-size: 110%;
    box-shadow: @block-active-box-shadow;
    transform: translate3d(0, -5px, 0);
  }

  &.editing {
    opacity: .3;
  }

  header {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 100%);
    border-radius: 2px 2px 0 0;
  }

  .title {
    padding: 12px 40px 0 12px;
    color: @white;

    .ellipsis;
  }

  .content {
    padding: 8px 12px 24px;
    color: @white;

    .ellipsis;
  }

  .icon {
    position: absolute;
    top: 8px;
    opacity: .7;
    color: @white;
    transition: transform 200ms ease;

    &:hover {
      opacity: 1;
      transform: scale(1.1, 1.1);
    }
  }

  .edit {
    right: 28px;

    .icon;
  }

  .delete {
    right: 8px;

    .icon;
  }
}

.gridItem {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: @block-box-shadow;
  transition: all 350ms ease;
  position: relative;

  .header {
    width: 100%;
    display: flex;
    flex-direction: row;

    .title {
      min-width: 0;
      height: 40px;
      padding: 0 2px;
      line-height: 40px;
      display: flex;
      flex-direction: row;
      align-items: center;
      cursor: move;
      flex: 1 1 auto;

      h4 {
        .ellipsis;
        cursor: default;
        margin-left: 8px;
      }

      i {
        font-size: 16px;
        margin-left: 8px;
        cursor: pointer;

        &:last-child {
          margin-right: 8px;
        }
      }

      .activated {
        color: @primary-color;
      }

      .error {
        color: @error-color;
      }
    }

    .tools {
      display: none;
      height: 40px;
      padding-right: 10px;
      flex-shrink: 0;

      i {
        font-size: 16px;
        line-height: 40px;
        margin-left: 8px;
        display: inline-block;
        cursor: pointer;
        transition: transform 200ms ease;

        &:hover {
          transform: scale(1.1, 1.1);
        }
      }
    }
  }

  &:hover {
    .header {
      .tools {
        display: block;
      }
    }
  }

  .trigger {
    position: absolute;
    top: 28px;
    left: 10px;
    i{
      font-size: 14px;
      color: @rich-text;
    }
  }

  &.interact {
    box-shadow: 0 0 3px @primary-color,
    0 0 8px @primary-color;

    &:hover {
      .header {
        .tools {
          display: none;
        }
      }
      .offInteract {
        display: flex;
      }
    }
  }

  .offInteract {
    background-color: fade(@white, 50);
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    z-index: 1;
    display: none;
    cursor: pointer;

    i {
      margin-right: 4px;
      color: @primary-color;
      font-size: 24px;
      font-weight: bold;
    }
  }

  .block {
    flex: 1;
    min-height: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
  }
}

.widgetInfoContent {
  max-width: 480px;

  :global {
    .ant-popover-title {
      font-weight: bold;
      color: @primary-color;
    }
    .ant-popover-inner-content {
      max-height: 360px;
      overflow-y: auto;
    }
  }
}

.gridBottom {
  height: 100px;
}

.dimension {
  position: relative;
  border-right: 2px solid transparent !important;

  &:after {
    background-image: linear-gradient(180deg, #1A237E, #4FC3F7, #FFB74D, #E65100);
    position: absolute;
    width: 2px;
    top: 0;
    right: 0;
    bottom: 0;
    content: '';
  }
}

.shareTitle {
  padding: 0 50px;
  text-align: center;
}

.shareDownloadListToggle {
  width: 50px;
  height: 32px;
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  i {
    font-size: 24px;
    cursor: pointer;
  }
}

.shareContentEmpty {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.menuItem {
  padding: 0;

  .menuText {
    padding: 7px 8px;
    display: block;
  }
}

@media (max-width: 1024px) {
  .gridItem {
    .header {
      .tools {
        opacity: 1;
      }
    }
  }
}

@media (max-width: 768px) {
  .gridItem {
    .header {
      .tools {
        .fullScreen {
          display: none;
        }
      }
    }
  }
}

.searchRow {
  margin: -10px 0 -10px;
}

// .popHide, .popShow {
//   background-color: @white;
//   position: absolute;
//   width: 8%;
//   top: 29px;
//   z-index: 1;
//   border: 1px solid transparent;
//   box-shadow: rgba(0,0,0,0.2) 0 2px 8px;
// }

// .popHide {
//   display: none;
// }

// .popShow {
//   display: block;
// }

// .selectBtn, .selectBtn:hover {
//   color:  @rich-text !important;
// }

// .selectItem {
//   padding: 4px;
//   cursor: pointer;
//   text-align: center;

//   &:hover {
//     color: @blue;
//   }
// }

// .selectIcon {
//   font-size: 17px;
// }

// .size {
//   width: 78px !important;
// }

.more {
  cursor: pointer;
  font-weight: 900;
  -moz-transform:rotate(-90deg);
  -webkit-transform:rotate(-90deg);
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  &:before {
    padding: 0 8px;
  }
}

.more:before, .swap:before, .itemAction:before {
  -moz-transform:rotate(-90deg);
  -webkit-transform:rotate(-90deg);
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.portalTreeSearch {
  overflow-x: auto;
  text-align: center;
  ul {
    max-height: 410px;
    overflow-y: auto;
    li {
      cursor: pointer;
      line-height: 26px;
    }
  }
}

.menu > li {
  cursor: pointer;
  line-height: 26px;
}

.portal {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .portalHeader {
    flex-shrink: 0;
    font-size: 12px;
  }

  .portalBody {
    flex: 1;
    display: flex;
    flex-direction: row;

    .portalTree {
      flex-shrink: 0;
      // width: 190px;
      margin-bottom: 16px;
      overflow: hidden;
      display: flex;
      flex-direction: column;

      .loadingTreeMsg {
        padding-left: 16px;
      }

      .portalRow {
        flex-shrink: 0;
        // display: flex;
        // flex-direction: row;
        align-items: center;
        padding: 16px;

        .search, .plus {
          cursor: pointer;
          margin-right: 8px;
        }
        .search:before, .plus:before {
          padding: 0 8px;
        }
      }

      .portalAction {
        float: right;
      }

      .portalTreeNode {
        flex: 1;
        overflow-y: auto;
        border-top: 1px solid #d9d9d9;
        padding-left: 8px;
        margin-bottom: 34px;
      }
    }

    .gridClass {
      flex: 1;
      min-width: 0;
      min-height: 0;
      border-left: 1px solid #d9d9d9;
    }
  }
}

.noDashboard {
  top: 32%;
  left: 50%;
  position: fixed;
  img {
    cursor: pointer;
  }
  p {
    text-align: center;
    color: rgba(10,18,32,.46);
  }
}

.portalTreeItem {
  .dashboardTitle {
    display: inline-block;
    margin-bottom: -4px;
    font-weight: 400;
    font-size: 14px;
    font-family: 'PingFang SC','Helvetica Neue',Helvetica,STHeitiSC-Light,WOL_SB,'Segoe UI Semibold','Segoe UI',Tahoma,Helvetica,sans-serif;
    .ellipsis;
  }

  .itemAction {
    opacity: 0;
  }

  &:hover {
    .itemAction {
      opacity: 1;
      cursor: pointer;
      font-weight: 900;
      margin-bottom: 1px;
    }
  }

  .itemName {
    margin-left: 8px;
    font-weight: 400;
    font-size: 14px;
    font-family: 'PingFang SC','Helvetica Neue',Helvetica,STHeitiSC-Light,WOL_SB,'Segoe UI Semibold','Segoe UI',Tahoma,Helvetica,sans-serif;
  }
}

.dataDrillPanel {
  position: absolute;
  color: rgba(0,0,0,.54);
  background: #fff;
  box-shadow: 0 0 6px 0 rgba(0,0,0,.1), 0 10px 12px 0 rgba(170,182,206,.36);
}
.dataDrillHistory {
  position: absolute;
  color: rgba(0,0,0,.4);
  left: 22px;
  bottom: 8px;
  span {
    cursor: pointer;
    &:hover {
      color: @rich-text;
    }
  }
}

.drillPathSetting {
  margin: 16px 0 0 0;
  .drillStyle {
    margin-bottom:16px;
    .label  {
      margin-right: 24px;
    }
  }
  .path {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    .pathNodeWrap{
      .pathNode{
        width: 240px;
        display: flex;
        .pathBox {
          width: 140px;
          padding: 4px 8px 0 8px;
          flex: 0 0 auto;
          border: 1px solid #d9d9d9;
          border-radius: 4px;
          .delete{
            height: 8px;
            i {
              display: none;
            }
          }
          .title{
            text-align: center;
            font-size: 14px;
            margin-bottom: 8px;
          }
          &:hover{
            i {
              padding: 4px 0px;
              text-align: right;
              display: block;
              cursor: pointer;
            }
          }
          .errorMessage {
            margin: 0 0 4px 4px;
            font-weight: 500;
            color: red;
          }
        }

        .relation{
          width: 60px;
          margin-left: 20px;
          align-self: center;
        }
      }
    }
    .add{
      align-self: center;
      i {
        font-size: 14px;
      }
    }
  }
  .footer{
    text-align: right;
    button {
      margin-left: 20px;
    }
  }
}

.reportMode {
  display: flex;
  overflow: auto;
  flex: 1;
  .authSizeTag {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #fff;
  }
}