@import '~scss/variables';
@import '~scss/mixins';

.content {
  display: flex;
  width: 100%;
  height: 100%;

  :global {
    .spin-nested-loading,
    .spin-container {
      height: 100%;
    }
  }
}

.resources {
  display: flex;
  flex-direction: column;
  width: 320px;
  margin-right: 12px;
  border-radius: 4px;
  border: 1px solid $light-color03;
  overflow: hidden;

  .title {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 48px;
    padding: 12px 0;
    background-color: $light;

    strong {
      padding: 0 8px;
      line-height: 24px;
      font-weight: 600;
    }

    :global {
      .checkbox {
        user-select: none;
      }
    }
  }

  .content {
    display: block;
    height: calc(100% - 48px);
  }

  .list {
    height: 100%;
    padding: 12px 8px;

    & > div {
      display: block;
      height: 100%;
      overflow: auto;

      &.hide {
        display: none;
      }
    }

    .item {
      display: flex;
      align-items: center;
      padding: 8px;
      border-radius: 4px;
      background-color: $card-bg-color;
      cursor: pointer;

      & + .item {
        margin-top: 8px;
      }

      :global {
        .checkbox {
          margin-left: 4px;
        }

        .icon {
          margin: 0 8px;
        }
      }

      &Check {
        pointer-events: none;
      }

      &Info {
        width: calc(100% - 52px);
        line-height: 20px;

        strong {
          font-weight: 600;
        }

        p {
          color: $second-text-color;
          @include ellipsis;
        }
      }
    }
  }
}

.charts {
  width: 100%;
  padding-right: 10px;
  margin-right: -10px;
  overflow: auto;

  .list {
    height: 100%;
  }

  .item {
    .title {
      font-size: $size-normal;
      font-weight: 600;
      line-height: 1.43;
      margin: 8px 0;
    }
  }
}
