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

@ICON_SIZE: 48px;

.tabItem{
    font-size: 36px;
    display: flex;
    color: #606060;
    align-items: center;
    height: 84px;
   
    padding-left: 42px;
    padding-right: 24px;

    &.focused {
      color: #eee;
      background: linear-gradient(to right, #cb1253, #e15ba1);
      border-radius: 42px;
      width: 402px;
      z-index: 1;
      margin-left: 30px;
      position:relative;
      > div{
        margin-left:-30px;
      }

    &.pressed {
        color: #eee;
        background: linear-gradient(to right, #cb1253, #e15ba1);
        border-radius: 42px;
        width: 402px;
        z-index: 1;
        margin-left: 30px;
        position:relative;
      }
    &.selected{
      // margin-left:0;
    }
  }

  &.arrow, &.selected {
    &::after {
      content: "";
      .size(@w:36px, @h:36px);
      .position(@position: absolute, @top: 24px, @right: 18px);
      background-image: url('../../../assets/icons/ic-lnb-right-arrow.png');
      background-size: 36px 36px;
      
      
    }
  }
    &.selected {
      color: #eee;
    }
   
    &.subDepth{
      width: 386px;
      height: 78px;
      margin-left: 0;

      &.focused {
        background: rgba(255, 255, 255, .1);
        border-radius: 0px;
        border-right: 6px solid #c70850;
        > div {
        padding-left: 30px;

  

}}}

.icon {
    position: relative;
    min-width: @ICON_SIZE;
    height: @ICON_SIZE;

    > img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    > svg {
        position: absolute;
        width: @ICON_SIZE;
        height: @ICON_SIZE;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      } 


}

.text {
    line-height: 1.2;
    padding-left: 11px;
    .font(@fontFamily:@baseFontBold, @fontSize:36px);
    

 
    &.subItem {
      .font (@fontFamily:@baseFontBold, @fontSize:30px);
      width: 245px;
      
    }
  

}

.subWrap{
  .flex();


   span {
    .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");
    }
   }
 
  
  
}

.layout {
  display: flex;
  
  &.focused, &.selected {
    // margin-left: -30px;
  }
}


.marqueeWrap {
    width: 100%;
  }
}