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

.item {
  height: 206px;
  &.selected {
    background-color: #eaeaea;
    > figure:nth-child(1) {
      background-color: @COLOR_WHITE;
      border: solid 2px @PRIMARY_COLOR_RED;
      > div {
        .size(@w: 80px, @h:80px);
        background-position: center;
        background-size: cover;

        // Fashion
        &.icon-1000 {
          background-image: url("../../../../../assets/images/icons/ic-category-fashion-foc@3x.png");
        }

        // Shoes
        &.icon-1001 {
          background-image: url("../../../../../assets/images/icons/ic-category-shoes-foc@3x.png");
        }

        // Handbags and Luggage
        &.icon-1002 {
          background-image: url("../../../../../assets/images/icons/ic-category-handbags-foc@3x.png");
        }

        // Beauty
        &.icon-1003 {
          background-image: url("../../../../../assets/images/icons/ic-category-beauty-foc@3x.png");
        }

        // Jewelry
        &.icon-1004 {
          background-image: url("../../../../../assets/images/icons/ic-category-jewelry-foc@3x.png");
        }

        // Gamstones
        &.icon-1005 {
          background-image: url("../../../../../assets/images/icons/ic-category-gamstones-foc@3x.png");
        }

        // Home
        &.icon-1006 {
          background-image: url("../../../../../assets/images/icons/ic-category-home-foc@3x.png");
        }

        // Kitchen & Food
        &.icon-1007 {
          background-image: url("../../../../../assets/images/icons/ic-category-kitchen-foc@3x.png");
        }

        // Garden and Outdoors
        &.icon-1008 {
          background-image: url("../../../../../assets/images/icons/ic-category-garden-foc@3x.png");
        }

        // Health & Fitness
        &.icon-1009 {
          background-image: url("../../../../../assets/images/icons/ic-category-health-foc@3x.png");
        }

        // Electronics
        &.icon-1010 {
          background-image: url("../../../../../assets/images/icons/ic-category-electronics-foc@3x.png");
        }

        // Crafts & Sewing
        &.icon-1011 {
          background-image: url("../../../../../assets/images/icons/ic-category-cw-foc@3x.png");
        }

        // Entertainment
        &.icon-1012 {
          background-image: url("../../../../../assets/images/icons/ic-category-enter-foc@3x.png");
        }

        // Clearance
        &.icon-1013 {
          background-image: url("../../../../../assets/images/icons/ic-category-clearance-foc@3x.png");
        }

        // Accessories
        &.icon-1014 {
          background-image: url("../../../../../assets/images/icons/ic-category-accessories-foc@3x.png");
        }

        // Gifts & Holidays
        &.icon-1015 {
          background-image: url("../../../../../assets/images/icons/ic-category-gift-foc@3x.png");
        }

        // Finance
        &.icon-1016 {
          background-image: url("../../../../../assets/images/icons/ic-category-finance-foc@3x.png");
        }

        // LG Electronics
        &.icon-1017 {
          background-image: url("../../../../../assets/images/icons/ic-category-lgelectronics-foc@3x.png");
        }

        //kids
        &.icon-1018 {
          background-image: url("../../../../../assets/images/icons/ic-category-kids-for@3x.png");
        }

        // Baby & kids
        &.icon-1019 {
          background-image: url("../../../../../assets/images/icons/ic-category-kids-for@3x.png");
        }
        // Food
        &.icon-1020 {
          background-image: url("../../../../../assets/images/icons/ic-category-food-foc@3x.png");
        }
        // Hobbies
        &.icon-1021 {
          background-image: url("../../../../../assets/images/icons/ic-category-garden-foc@3x.png");
        }
        // Sports & Outdoors
        &.icon-1023 {
          background-image: url("../../../../../assets/images/icons/ic-category-sports-outdoors-foc@3x.png");
        }
        // Promotions Banner
        &.icon-9998 {
          background-image: url("../../../../../assets/images/icons/ic-category-default-foc@3x.png");
        }

        // Tag Category Desc
        &.icon-9999 {
          background-image: url("../../../../../assets/images/icons/ic-category-default-foc@3x.png");
        }
      }
    }

    > strong:nth-child(2) {
      color: @PRIMARY_COLOR_RED;
    }
    &::before {
      content: "";
      .position(@position: absolute, @top: 0, @right: 0, @bottom: 0, @left: 0);
      border: 1px solid @COLOR_GRAY02;
      border-bottom: 0;
    }
  }
  position: relative;
  .flex(@direction: column, @justifyCenter: flex-start);
  min-width: 210px;
  margin: 22px 30px 0 0;
  padding-top: 20px;
  color: @COLOR_GRAY08;
  text-align: center;

  > figure:nth-child(1) {
    .flex();
    .size(@w: 94px, @h: 94px);
    margin-bottom: 18px;
    border-radius: 48px;
    background-color: @COLOR_GRAY08;
    border: 2px solid @COLOR_GRAY08;

    > div {
      .size(@w: 80px, @h:80px);
      background-position: center;
      background-size: cover;

      // Fashion
      &.icon-1000 {
        background-image: url("../../../../../assets/images/icons/ic-category-fashion-nor@3x.png");
      }

      // Shoes
      &.icon-1001 {
        background-image: url("../../../../../assets/images/icons/ic-category-shoes-nor@3x.png");
      }

      // Handbags and Luggage
      &.icon-1002 {
        background-image: url("../../../../../assets/images/icons/ic-category-handbags-nor@3x.png");
      }

      // Beauty
      &.icon-1003 {
        background-image: url("../../../../../assets/images/icons/ic-category-beauty-nor@3x.png");
      }

      // Jewelry
      &.icon-1004 {
        background-image: url("../../../../../assets/images/icons/ic-category-jewelry-nor@3x.png");
      }

      // Gamstones
      &.icon-1005 {
        background-image: url("../../../../../assets/images/icons/ic-category-gamstones-nor@3x.png");
      }

      // Home
      &.icon-1006 {
        background-image: url("../../../../../assets/images/icons/ic-category-home-nor@3x.png");
      }

      // Kitchen & Food
      &.icon-1007 {
        background-image: url("../../../../../assets/images/icons/ic-category-kitchen-nor@3x.png");
      }

      // Garden and Outdoors
      &.icon-1008 {
        background-image: url("../../../../../assets/images/icons/ic-category-garden-nor@3x.png");
      }

      // Health & Fitness
      &.icon-1009 {
        background-image: url("../../../../../assets/images/icons/ic-category-health-nor@3x.png");
      }

      // Electronics
      &.icon-1010 {
        background-image: url("../../../../../assets/images/icons/ic-category-electronics-nor@3x.png");
      }

      // Crafts & Sewing
      &.icon-1011 {
        background-image: url("../../../../../assets/images/icons/ic-category-cw-nor@3x.png");
      }

      // Entertainment
      &.icon-1012 {
        background-image: url("../../../../../assets/images/icons/ic-category-enter-nor@3x.png");
      }

      // Clearance
      &.icon-1013 {
        background-image: url("../../../../../assets/images/icons/ic-category-clearance-nor@3x.png");
      }

      // Accessories
      &.icon-1014 {
        background-image: url("../../../../../assets/images/icons/ic-category-accessories-nor@3x.png");
      }

      // Gifts & Holidays
      &.icon-1015 {
        background-image: url("../../../../../assets/images/icons/ic-category-gift-nor@3x.png");
      }

      // Finance
      &.icon-1016 {
        background-image: url("../../../../../assets/images/icons/ic-category-finance-nor@3x.png");
      }

      // LG Electronics
      &.icon-1017 {
        background-image: url("../../../../../assets/images/icons/ic-category-lgelectronics-nor@3x.png");
      }

      //kids
      &.icon-1018 {
        background-image: url("../../../../../assets/images/icons/ic-category-kids-nor@3x.png");
      }

      // Baby & kids
      &.icon-1019 {
        background-image: url("../../../../../assets/images/icons/ic-category-kids-nor@3x.png");
      }
      // Food
      &.icon-1020 {
        background-image: url("../../../../../assets/images/icons/ic-category-food-nor@3x.png");
      }
      // Hobbies
      &.icon-1021 {
        background-image: url("../../../../../assets/images/icons/ic-category-garden-nor@3x.png");
      }
      // Sports & Outdoors
      &.icon-1023 {
        background-image: url("../../../../../assets/images/icons/ic-category-sports-outdoors-nor@3x.png");
      }

      // Promotions Banner
      &.icon-9998 {
        background-image: url("../../../../../assets/images/icons/ic-category-default-nor@3x.png");
      }

      // Tag Category Desc
      &.icon-9999 {
        background-image: url("../../../../../assets/images/icons/ic-category-default-nor@3x.png");
      }
    }
  }

  > strong:nth-child(2) {
    height: 60px;
  }
  // focused
  &:focus {
    > figure:nth-child(1) {
      background-color: @PRIMARY_COLOR_RED;
      border: solid 2px @PRIMARY_COLOR_RED;
      > div {
        // Fashion
        &.icon-1000 {
          background-image: url("../../../../../assets/images/icons/ic-category-fashion-nor@3x.png");
        }

        // Shoes
        &.icon-1001 {
          background-image: url("../../../../../assets/images/icons/ic-category-shoes-nor@3x.png");
        }

        // Handbags and Luggage
        &.icon-1002 {
          background-image: url("../../../../../assets/images/icons/ic-category-handbags-nor@3x.png");
        }

        // Beauty
        &.icon-1003 {
          background-image: url("../../../../../assets/images/icons/ic-category-beauty-nor@3x.png");
        }

        // Jewelry
        &.icon-1004 {
          background-image: url("../../../../../assets/images/icons/ic-category-jewelry-nor@3x.png");
        }

        // Gamstones
        &.icon-1005 {
          background-image: url("../../../../../assets/images/icons/ic-category-gamstones-nor@3x.png");
        }

        // Home
        &.icon-1006 {
          background-image: url("../../../../../assets/images/icons/ic-category-home-nor@3x.png");
        }

        // Kitchen & Food
        &.icon-1007 {
          background-image: url("../../../../../assets/images/icons/ic-category-kitchen-nor@3x.png");
        }

        // Garden and Outdoors
        &.icon-1008 {
          background-image: url("../../../../../assets/images/icons/ic-category-garden-nor@3x.png");
        }

        // Health & Fitness
        &.icon-1009 {
          background-image: url("../../../../../assets/images/icons/ic-category-health-nor@3x.png");
        }

        // Electronics
        &.icon-1010 {
          background-image: url("../../../../../assets/images/icons/ic-category-electronics-nor@3x.png");
        }

        // Crafts & Sewing
        &.icon-1011 {
          background-image: url("../../../../../assets/images/icons/ic-category-cw-nor@3x.png");
        }

        // Entertainment
        &.icon-1012 {
          background-image: url("../../../../../assets/images/icons/ic-category-enter-nor@3x.png");
        }

        // Clearance
        &.icon-1013 {
          background-image: url("../../../../../assets/images/icons/ic-category-clearance-nor@3x.png");
        }

        // Accessories
        &.icon-1014 {
          background-image: url("../../../../../assets/images/icons/ic-category-accessories-nor@3x.png");
        }

        // Gifts & Holidays
        &.icon-1015 {
          background-image: url("../../../../../assets/images/icons/ic-category-gift-nor@3x.png");
        }

        // Finance
        &.icon-1016 {
          background-image: url("../../../../../assets/images/icons/ic-category-finance-nor@3x.png");
        }

        // LG Electronics
        &.icon-1017 {
          background-image: url("../../../../../assets/images/icons/ic-category-lgelectronics-nor@3x.png");
        }
        //kids
        &.icon-1018 {
          background-image: url("../../../../../assets/images/icons/ic-category-kids-nor@3x.png");
        }
        // Baby & kids
        &.icon-1019 {
          background-image: url("../../../../../assets/images/icons/ic-category-kids-nor@3x.png");
        }
        // Food
        &.icon-1020 {
          background-image: url("../../../../../assets/images/icons/ic-category-food-nor@3x.png");
        }
        // Hobbies
        &.icon-1021 {
          background-image: url("../../../../../assets/images/icons/ic-category-garden-nor@3x.png");
        }
        // Sports & Outdoors
        &.icon-1023 {
          background-image: url("../../../../../assets/images/icons/ic-category-sports-outdoors-nor@3x.png");
        }
        // Promotions Banner
        &.icon-9998 {
          background-image: url("../../../../../assets/images/icons/ic-category-default-nor@3x.png");
        }

        // Tag Category Desc
        &.icon-9999 {
          background-image: url("../../../../../assets/images/icons/ic-category-default-nor@3x.png");
        }
      }
    }

    > strong:nth-child(2) {
      color: @PRIMARY_COLOR_RED;
    }

    &::after {
      background-color: @PRIMARY_COLOR_RED;
    }
  }
  &::after {
    .position(@position: absolute, @bottom: 0);
    display: block;
    .size(@w: 100%, @h:6px);
    background-color: transparent;
    content: "";
  }
}

// selected
