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

.category {
  &.selected {
    background-color: #eaeaea;

    div {
      background-color: @COLOR_WHITE;
      border: solid 2px @PRIMARY_COLOR_RED;
    }

    strong {
      color: @PRIMARY_COLOR_RED;
    }
    span {
      .size(@w: 80px, @h:80px);
      background-position: center;
      background-size: cover;
      border-radius: 50%;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      // Tag Category Desc
      &.category-icon-9999 {
        background-image: url("../../../../../../assets/images/icons/ic-category-default-foc@3x.png");
      }
    }
    &::before {
      content: "";
      .position(@position: absolute, @top: 0, @right: 0, @bottom: 0, @left: 0);
      border: 1px solid @COLOR_GRAY02;
      border-bottom: 0;
    }
  }
  /* normal */
  position: relative;
  .flex(@direction: column);
  color: @COLOR_GRAY08;
  text-align: center;
  padding-top: 20px;

  div {
    .flex();
    .size(@w: 94px, @h: 94px);
    margin-bottom: 12px;
    border-radius: 48px;
    background-color: @COLOR_GRAY08;
    border: 2px solid @COLOR_GRAY08;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  strong {
    height: 68px;
    margin-bottom: 12px;
    width: 100%;
    line-height: 34px;
    .elip(@clamp:2);
  }

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

  /* focused */
  &:focus {
    div {
      background-color: @PRIMARY_COLOR_RED;
      border: solid 2px @PRIMARY_COLOR_RED;
    }

    strong {
      color: @PRIMARY_COLOR_RED;
    }
    span {
      .size(@w: 80px, @h:80px);
      background-position: center;
      background-size: cover;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* selected */
