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

.container {
  .flex(@justifyCenter:flex start);
  .size(@w: 100%, @h: 180px);
  padding: 30px 60px;
  background-color: #e7e7e7;

  ul {
    .flex(@justifyCenter: flex-start);
    gap: 18px;

    /* normal */
    li {
      position: relative;

      .newBagde {
        .position(@position: absolute, @top: 0, @right: 0, @bottom: auto, @left: auto);
        z-index: 10;
        .size(@w: 60px, @h: 30px);
        background-color: #f00;
        color: #fff;
        border-radius: 6px;
        font-family: Arial;
        font-weight: 600;
        font-size: 18px;
        text-align: center;
      }

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

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

      /* focused */
      &:focus {
        border-radius: 60px;
        .focusDropShadow();

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

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

      /* selected */
      &.selected {
        img {
          .size(@w: 138px, @h: 138px);
        }
        .outline {
          background-image: url("../../../../assets/images/partners/ic-tab-partners-selected@3x.png");
        }
      }
    }
  }
}
