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

.wrapper {
  margin-top: 12px;
  padding: 40px 0;
  border-radius: 4px;
  box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06);
  background-color: #ffffff;
  text-align: center;
}

.image {
  display: inline-block;
  width: 60px;
  height: 60px;
  padding: 10px;
  border-radius: 100px 0 100px 100px;
  background-color: $bg-color;
}

.footer {
  position: relative;
  height: 1px;
  margin-top: 32px;
  border-style: solid;
  border-width: 1px 0 0 0;
  border-image-source: radial-gradient(
    circle at 50% 7%,
    #d8dee5,
    rgba(216, 222, 229, 0.16)
  );
  border-image-slice: 1;

  & > p {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 0 8px;
    background-color: #ecf1f7;
    transform: translate(-50%, -50%);
    color: #79879c;
  }
}

.items {
  margin-top: 12px;
}

.item {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06);
  cursor: pointer;
  transition: all $trans-speed ease-in-out;

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

  &:hover {
    box-shadow: 0 6px 16px 0 rgba(33, 43, 54, 0.2);

    :global .h5 {
      color: #4ca986;
    }
  }

  .icon {
    position: relative;
    margin-right: 20px;
    width: 84px;
    height: 84px;

    img {
      width: 100%;
      height: 100%;
    }

    .iconExtra {
      position: absolute;
      bottom: 0;
      right: 0;
      padding: 8px;
      border-radius: 100px 0 100px 100px;
      background-color: #329dce;
    }
  }

  .title {
    :global .h5 {
      line-height: 1.5;
      text-shadow: none;
      max-width: 280px;
      text-overflow: ellipsis;
      overflow: hidden;
      transition: all $trans-speed ease-in-out;
    }

    span {
      color: #79879c;
    }
  }

  .left {
    display: flex;
  }

  .right {
    display: flex;
    margin: -8px;
    padding: 20px 12px;
    border-radius: 2px;
    background-color: $lightest;

    & > div {
      margin-right: 20px;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  .versions {
    margin-right: 36px;
  }
}

.tag {
  position: relative;
  padding-left: 22px;

  &::before {
    content: '';
    position: absolute;
    @include vertical-center;
    left: 4px;
    width: 10px;
    height: 10px;
    border-radius: 1px;
    background-color: #329dce;
  }

  & + .tag {
    &::before {
      background-color: #c7deef;
    }
  }

  span {
    color: #79879c;
  }
}

.loading {
  display: block;
  margin: 100px 0;
  text-align: center;
}

.chart {
  display: flex;

  .chartDetail {
    margin-left: 12px;
  }

  .circle {
    position: relative;
    height: 60px;

    :global {
      .icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
}

.tip {
  margin-top: -3px;
}
