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

@ICON_SIZE: 48px;

// @-webkit-keyframes textLoop {
//   0% {
//     -webkit-transform: translate(50%);
//     transform: translate(50%);
//   }
//   to {
//     -webkit-transform: translate(calc(-100% - 189px));
//     transform: translate(calc(-100% - 189px));
//   }
// }

// @keyframes textLoop {
//   0% {
//     -webkit-transform: translate(50%);
//     transform: translate(50%);
//   }
//   to {
//     -webkit-transform: translate(calc(-100% - 289px));
//     transform: translate(calc(-100% - 189px));
//     left: 100%; /* 끝 위치 */
//   }
// }

.tabItem {
  font-size: 36px;
  display: flex;
  color: #606060;
  align-items: center;
  height: 84px;
  position: relative;
  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;

    &.arrow {
      &::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;
  }

  .itemWrap {
    display: flex;
    &.focused {
      margin-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;
      // word-break:break-all;
    }
  }

  .marqueeWrap {
    width: 100%;
  }
}
