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

@ICON_SIZE: 48px;

.tabItem {
  font-size: 36px;
  color: #999;
  margin: 21px 0;
  position: relative;
  padding: 0 24px 0 48px;

  > div {
    height: 78px;
  }

  &.featuredBrands {
    margin: 0;
    > div:first-child {
      height: 110px;
    }
  }
  &.focused {
    background: rgba(255, 255, 255, 0.1);
    background: linear-gradient(to right, #cb1253, #e15ba1);
    border-radius: 0px;
    margin-left: 0px;
    color: #fff;
  }
  &.path {
    padding-left: 0px;
  }

  &.selected {
    color: #fff;
  }

  .imageWrap {
    position: relative;

    &.selected {
      color: #fff;
    }

    .iconContainer {
      .size(@w: 402px, @h: 110px);
      display: flex;
      align-items: center;

      img {
        .size(@w:80px, @h: 80px);
        border: 4px solid transparent;
        border-radius: 50%;
        object-fit: contain;
        margin-right: 21px;
        margin-left: 48px;
      }

      h3 {
        font-size: 28px;
        font-weight: 600;
      }

      &.focused {
        img {
          border: 4px solid #c70850;
          border-radius: 50%;
          .size(@w: 80px, @h: 80px);
        }

        background: rgba(255, 255, 255, 0.1);
        background: linear-gradient(to right, #cb1253, #e15ba1);
        color: #fff;
      }
    }

    &.selected {
      img {
        border: 4px solid #c70850;
        .size(@w: 80px, @h: 80px);
        object-fit: contain;
        border-radius: 50%;
      }
    }
    &.selectedFocus {
      img {
        border: 5px solid #808080;
        object-fit: contain;
        .size(@w: 80px, @h: 80px);
        border-radius: 50%;
      }
    }
  }

  .text {
    height: 42px;
    line-height: 1.2;
    padding-left: 11px;

    .elip(@clamp: 1);
    word-break: break-all;
    font-weight: bold;
    font-size: 36px;

    &.subItem {
      font-weight: bold;
      font-size: 30px;
      width: 248px;
    }
  }

  .subWrap {
    display: flex;
    align-items: center;

    .icon {
      .size(@w: 40px, @h:40px);
      background-size: cover;
      opacity: 0.5;

      // 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");
      }

      &.focused,
      &.selected {
        opacity: 1;
      }
    }
  }

  .layout {
    display: flex;
  }

  .marqueeWrap {
    width: 100%;
  }
}
