@import '../../styles/variable';

.package {
  display: block;
  position: relative;
  margin: 0;
  padding: 10px 0;
  cursor: pointer;
  text-decoration: none;

  h1 {
    font-size: 18px;
    color: $primary-color;

    :global {
      .el-tag {
        margin-left: 5px;
      }
    }
  }

  // Author
  .author {
    position: absolute;
    top: 10px;
    right: 0;
    color: lightgrey;
    font-size: inherit;
    word-wrap: break-word;
    width: 100px;
    text-align: right;
  }

  p {
    margin-bottom: 0;
    font-size: 14px;
    color: darkgray;
  }

  &:hover {
    &::before {
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: rgba(255, 255, 255, 0.7);
      content: '';
    }

    &::after {
      display: block;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 0;
      left: 0;
      content: 'Click to view detail';
      text-align: center;
      color: $primary-color;
      font-size: 18px;
    }
  }
}
