.cardWrap {
  position: relative;
  display: flex;
  width: 100%;
  height: 161px;
  padding: 12px 16px 16px;
  margin: 8px 0;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--semi-color-border);
  border-radius: var(--border-radius);
  transform: translateZ(0);
  flex-direction: column;

  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    color: var(--semi-color-primary);

    .rightWrap {
      opacity: 0;
    }
  }

  .actions {
    position: absolute;
    bottom: -1px;
    left: 0;
    z-index: 10;
    display: flex;
    width: 100%;
    padding: 8px;
    background-color: var(--semi-color-fill-2);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    opacity: 0;
    justify-content: space-around;
    transition: all ease-in-out 0.2s;

    button {
      width: 40%;
    }
  }

  &:hover {
    box-shadow: var(--semi-color-shadow);

    header .rightWrap {
      opacity: 1;
    }

    .actions {
      opacity: 1;
    }
  }

  footer {
    margin-top: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
