.addon-item {
  min-width: 260px;
  height: 141px;
  background: $white;
  border-radius: $radius;
  @extend %shallow-shadow;

  &:hover {
    @extend %hover-shadow;
  }
}

.addon-list {
  flex: 1;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.addon-item-container {
  position: relative;
  flex: 1;
  min-width: 0;
}

.addon-category-section {
  margin-bottom: 20px;
}

.env-icon {
  position: absolute;
  top: -3px;
  right: 13px;

  svg {
    width: 30px;
    height: 30px;
  }

  &::after {
    position: absolute;
    bottom: $p12;
    left: $p8;
    display: block;
    color: $color-primary;
    content: attr(data-env);
  }
}

.addon-item-main {
  display: flex;
  height: 86px;
  border-bottom: 1px solid $color-border;

  svg {
    width: 40px;
    height: 40px;
    color: unset;
  }

  .icon-wrap {
    padding: $p24 $p16;
  }
}

.addon-item-info {
  padding: $p16 0;
  padding-right: $p16;
  overflow: hidden;

  .title {
    color: $color-text;
    font-size: 16px;
    line-height: 24px;
  }

  .footer {
    margin-top: $p8;
    color: $color-dark-5;
    line-height: 22px;

    > span:first-child {
      margin-right: $p12;
    }
  }
}

.addon-item-footer {
  padding: 0 $p16;
  color: $color-text-desc;
  line-height: 54px;

  .iconfont {
    color: $color-text-holder;
    vertical-align: baseline;
  }

  .btn-group {
    > span {
      cursor: pointer;

      > i {
        font-size: 20px;
      }
    }
  }

  .info {
    .project-name {
      width: 100px;
      line-height: 32px;
    }

    .iconfont {
      font-size: 13px;
    }

    > span:first-child {
      margin-right: $p16;
    }
  }
}
