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

@ICON_SIZE: 48px;

.tabItem {
  font-size: 36px;
  color: #999;
  margin: 12px 0;
  position: relative;
  padding: 0 24px 0 48px;
  > div {
    height: 78px;
  }

  &.focused {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0px;
    border-right: 6px solid #c70850;
    margin-left: 0px;
    color: #fff;
  }
  &.path {
    padding-left: 0px;
    margin-bottom: 70px;
  }

  &.selected {
    color: #fff;
  }

  .imageWrap {
    position: relative;
    margin: 0 30px 0 48px;
    img {
      .size(@w: 120px, @h: 120px);
      object-fit: contain;
    }

    span {
      .position(@position: absolute, @top: 0, @right: 0, @bottom: 0, @left: 0);
      .size(@w: 140px, @h: 140px);

      background-position: center;
      background-size: cover;
    }

    &.focused {
      img {
        box-shadow: -3px 0px 30px 0 #c70850;
        border-radius: 37%;
        .size(@w: 138px, @h: 138px);
        object-fit: contain;
      }
      span {
        background-image: url("../../../assets/icons/ic-tab-partners-focus@3x.png");
      }
    }
    &.selected {
      img {
        .size(@w: 138px, @h: 138px);
        object-fit: contain;
      }
      span {
        background-image: url("../../../assets/icons/ic-tab-partners-lnb-selected@3x.png");
      }
    }
    &.selectedFocus {
      img {
        box-shadow: -3px 0px 30px 0 #808080;
        border-radius: 37%;
      }
    }
  }

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

    .elip(@clamp: 1);
    .font(@fontFamily:@baseFontBold, @fontSize:36px);

    &.subItem {
      .font (@fontFamily:@baseFontBold, @fontSize:30px);
      width: 248px;
      word-break: break-all;
    }
  }

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

    .icon {
      .size(@w: 40px, @h:40px);
      background-size: cover;
      &.category-icon-1017 {
        // LG Electronics
        background-image: url("../../../assets/category/ic-category-lgelectronics-nor@3x.png");
      }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .layout {
    display: flex;
  }

  .marqueeWrap {
    width: 100%;
  }
}
