@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;
  position: relative;
  margin-left: 36px;
  border: none !important;           // ✅ 모든 테두리 제거
  outline: none !important;          // ✅ 포커스 아웃라인 제거
  box-shadow: none !important;       // ✅ 그림자 제거

  &.focused {
    color: #eee;
    border: none !important;         // ✅ focused 상태에서도 테두리 제거
    outline: none !important;        // ✅ focused 상태에서도 포커스 아웃라인 제거
    &::before {
      background: linear-gradient(to right, #cb1253, #e15ba1);
      border-radius: 42px;
      width: 402px;
      height: 100%;
      z-index: 3;
      position: absolute;
      left: -18px;
      top: 0;
      z-index: 1;
      content: "";
    }
  }

  &.opened {
    color: #eee;
    width: 402px;
    z-index: 2;
    position: relative;
    &.arrow {
      &::after {
        content: "";
        .size(@w:36px, @h:36px);
        .position(@position: absolute, @top: 24px, @right: 26px);
        z-index: 2;
        background-image: url("../../../assets/images/icons/ic-lnb-right-arrow.png");
        background-size: 36px 36px;
      }
    }
  }

  &.selected {
    color: #eee;
  }

  .itemWrap {
    display: flex;
  }

  .icon {
    position: relative;
    z-index: 2;
    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 {
    .elip(1);
    word-break: break-all;
    width: 285px;
    line-height: 1.2;
    padding-left: 12px;
    font-weight: bold;
    position: relative;
    z-index: 2;
    font-size: 36px;

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

  .marqueeWrap {
    width: 100%;
  }
}
