.plugin {
  margin-bottom: 0;

  .plugin-wrapper {
    position: relative;
  }

  .btn-container {
    position: absolute;
    bottom: 0;
    left: 0;

    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    width: 100%;

    &.one-column-grid {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }

  &:hover {
    .btn-container {
      display: grid;
    }

    .description {
      visibility: hidden;
    }
  }

  .card-avatar {
    width: 48px;
    height: 48px;
    border-radius: 6px;

    /*
   * The reason for writing borders and setting background colors like this
   * 1. The border is the inner border, which is on the edge of the picture, so you need to use after to write
   * 2. The background color is written with the before entity, because the border and background colors are both transparent colors. Overlapping will cause the color to increase and the border will appear.
   */
    &::after {
      content: '';

      position: absolute;
      z-index: 2;

      width: calc(100% - 2px);
      height: calc(100% - 2px);

      border-style: solid;
      border-width: 1px;
      border-radius: 6px;

      @apply coz-stroke-primary;
    }

    &::before {
      content: '';

      position: absolute;
      z-index: 1;
      top: 1px;
      left: 1px;

      width: calc(100% - 2px);
      height: calc(100% - 2px);

      @apply bg-stroke-5;

      border-radius: 5px;
    }

    & > img {
      z-index: 2;
    }
  }
}
