@import "../../../../../style/CommonStyle.module.less";
@import "../../../../../style/utils.module.less";

.item {
  /* normal */
  position: relative;
  .size(@w: 480px, @h: 344px);
  padding: 30px;
  border: solid 1px @COLOR_GRAY02;
  border-radius: 12px;
  background-color: @COLOR_WHITE;

  > div:nth-child(1) {
    .flex(@justifyCenter: flex-start);
    margin-bottom: 30px;

    img {
      .size(@w: 72px, @h: 72px);
      margin-right: 18px;
    }

    span {
      .font(@fontFamily: @baseFontBold, @fontSize: 36px);
      color: @COLOR_WHITE;
    }
  }

  time {
    display: inline-block;
    min-height: 42px;
    margin-bottom: 20px;
    .font(@fontFamily: @baseFontBold, @fontSize: 36px);
    color: @PRIMARY_COLOR_RED;
  }

  h3 {
    margin-bottom: 15px;
    .font(@fontFamily: @baseFontBold, @fontSize: 30px);
    color: @COLOR_GRAY06;
    .elip(@clamp:2);
    word-break: break-all;
    overflow: hidden;
  }

  p {
    margin-bottom: 18px;
    .font(@fontFamily: @baseFont, @fontSize: 24px);
    color: @COLOR_GRAY04;
    .elip(@clamp:1);
    word-break: break-all;
    overflow: hidden;
  }

  button {
    .position(@position: absolute, @right: 30px, @bottom: 30px, @left: 30px);
    .flex();
    .size(@w: 420px, @h: 84px);
    border-radius: 10px;
    background-color: @PRIMARY_COLOR_RED;
    .font(@fontFamily: @baseFontBold, @fontSize: 30px);
    color: @COLOR_WHITE;
  }

  /* normal focused */
  &:focus-within,
  &:focus {
    &::after {
      .focused(@boxShadow: 22px, @borderRadius: 12px);
    }
  }
}

/* selected */
.selected {
  background-color: rgba(0, 0, 0, 0.5);

  time {
    color: @SELECTED_COLOR_RED;
  }

  p {
    color: @COLOR_GRAY05;
  }

  /* selected focused */
}
