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

.item {
  /* normal */
  position: relative;
  .size(@w: 138px, @h: 138px);
  .flex();

  // partner logo
  img {
    .size(@w: 120px, @h: 120px);
  }

  // newBadge
  > div {
    .position(@position: absolute, @top: 0, @right: 18px);
    z-index: 10;
    .size(@w: 60px, @h: 30px);
    border-radius: 6px;
    background-color: #f00;
    .font(@fontFamily: @arialFontBold, @fontSize: 18px);
    color: @COLOR_WHITE;
    text-align: center;
  }

  // outline
  > span {
    .position(@position: absolute, @top: 0, @right: 0, @bottom: 0, @left: 0);
    .size(@w: 138px, @h:138px);
    background-position: center;
    background-size: cover;
  }

  /* focused */
  &:focus-within,
  &:focus {
    border-radius: 100%;
    .focusDropShadow();

    // partner logo
    img {
      .size(@w: 138px, @h: 138px);
    }

    // newBadge
    > div {
      right: 0;
    }

    // outline
    > span {
      background-image: url("../../../../../assets/images/partners/ic-tab-partners-focus@3x.png");
    }
  }

  /* selected */
  &.selected {
    // partner logo
    img {
      .size(@w: 138px, @h: 138px);
    }

    // newBadge
    > div {
      right: 0;
    }

    // outline
    > span {
      background-image: url("../../../../../assets/images/partners/ic-tab-partners-selected@3x.png");
    }
  }
}
