.resource-info {
  height: 100%;

  &__top {
    width: 100%;
    height: 125px;
    margin-bottom: 10px;
    padding: 20px 30px;
    background-image: url(@/assets/img/dataset-intro-top.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;

    &__name {
      margin-right: 10px;
      color: @text-color;
      font-weight: 500;
      font-size: 20px;
      .singleLine();
    }

    &__tag {
      flex: none;
      padding: 4px 10px;
      color: @primary-color;
      font-size: 14px;
      background: .addAlpha(@primary-color, 0.1) [];
      border-radius: 4px;
    }

    &__praise {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 70px;
      height: 28px;
      margin-left: auto;
      color: @text-color-tertiary;
      font-size: 13px;
      background: #ffffff;
      border: 1px solid rgba(22, 100, 255, 0.11);
      border-radius: 4px;
      cursor: pointer;

      &:hover {
        border-color: .addAlpha(@primary-color, 0.5) [];
      }

      &--praised {
        color: @primary-color;
      }
    }

    :global {
      .ant-btn-dangerous {
        background-color: .addAlpha(@error-color, 0.06) [] !important;
        border-color: .addAlpha(@error-color, 0.11) [] !important;
      }
    }
  }

  &__bottom {
    position: relative;
    height: calc(100% - 135px);

    &__legend {
      position: absolute;
      top: 20px;
      right: 30px;
    }

    :global {
      .ant-tabs {
        height: 100%;
        .ant-tabs-nav-wrap {
          padding-top: 8px;
          padding-left: @content-padding;
          background-color: white;
          border-radius: 10px 10px 0 0;
        }
        .ant-tabs-content-holder {
          height: 100%;
          .ant-tabs-content {
            height: 100%;
            .ant-tabs-tabpane {
              height: 100%;
              overflow-y: auto;
            }
          }
        }
      }
    }
  }
}
