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

.brand {
  position: relative;
  .flex();
  .size(@w: 144px, @h: 144px);

  > div {
    position: relative;
    // partner logo
    > img {
      .size(@w: 120px, @h: 120px);
      border-radius: 50%;
    }

    // new
    > div {
      .position(@position: absolute, @top: -6px, @right: 0);
      z-index: 30;
      padding: 6px;
      border-radius: 6px;
      background-color: #f00;
      .font(@fontFamily: @arialFontBold, @fontSize: 18px);
      color: @COLOR_WHITE;
      text-align: center;
      line-height: 1;
    }
  }

  &.selected {
    // partner logo
    .size(@w: 144px, @h: 144px);
    > div {
      &:after {
        .focused(@boxShadow: 0px, @borderRadius: 50%);
      }

      > img {
        .size(@w: 144px, @h: 144px);
        border-radius: 50%;
      }
      > div {
        top: -6px;
      }
    }
  }

  &:focus {
    // partner logo
    &:after {
      .size(@w:100%, @h:6px);
      position: absolute;
      left: 0;
      bottom: -18px;
      background: @PRIMARY_COLOR_RED;
      content: "";
    }
    > div {
      &:after {
        .focused(@boxShadow: 0px, @borderRadius: 50%);
        border-color: @PRIMARY_COLOR_RED;
      }
      > img {
        .size(@w: 120px, @h: 120px);
        border-radius: 50%;
      }
      > div {
        top: -6px;
      }
    }
  }
}
