/**
* Copyright (c) 2022 - present TinyVue Authors.
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
*
* Use of this source code is governed by an MIT-style license.
*
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/

@import '../mixins/common.less';
@import '../custom.less';
@import './vars.less';

@fall-menu-prefix-cls: ~'@{css-prefix}fall-menu';

.@{fall-menu-prefix-cls} {
  .inject-FallMenu-vars();
  box-shadow: 0 1px 4px 0 #14000000;

  & &__wrap {
    background: var(--tv-FallMenu-bg-color-normal);
    padding: 0 24px;
  }

  & &__nav {
    height: var(--tv-FallMenu-menu-height);
    margin: 0 auto;
    position: relative;
  }

  & &__subnav {
    overflow: hidden;

    .icon-slot-left,
    .icon-slot-right {
      color: var(--tv-FallMenu-slot-text-color);
      cursor: pointer;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: var(--tv-FallMenu-icon-font-size);
      line-height: 1;

      svg {
        fill: var(--tv-FallMenu-box-svg-fill);
      }
    }

    .icon-slot-left {
      left: -12px;
    }

    .icon-slot-right {
      right: -12px;
    }
  }

  & &__list {
    position: relative;
    min-width: 4000px;
    left: 0;
    transition: left 0.4s;

    .fall-hide {
      .opacity(0);
    }

    .active-show {
      font-size: var(--tv-FallMenu-box-font-size-hover);
      font-weight: var(--tv-FallMenu-box-font-weight-hover);
    }

    ul {
      .clearfix();
    }

    li {
      float: left;
      position: relative;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    a {
      float: left;
      display: block;
      width: auto;
      padding: 0 12px;
      height: var(--tv-FallMenu-menu-height);
      text-align: center;
      text-decoration: none;
      font-weight: 400;
      line-height: var(--tv-FallMenu-menu-height);
      font-size: var(--tv-FallMenu-title-font-size);
      color: var(--tv-FallMenu-slot-text-color);

      &:hover,
      &.now {
        color: var(--tv-FallMenu-slot-text-color);
        text-decoration: none;
        font-size: var(--tv-FallMenu-box-font-size-hover);
        font-weight: var(--tv-FallMenu-box-font-weight-hover);
      }

      &.now:before {
        position: absolute;
        content: '';
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0;
        border-color: #ffffff transparent;
        top: 34px;
        left: 42%;
      }
    }
  }

  & &__box {
    position: absolute;
    left: 0px;
    top: var(--tv-FallMenu-menu-height);
    width: 100%;
    background: var(--tv-FallMenu-slot-bg-color);
    overflow: hidden;
    transition: opacity 0.4s;
    border-radius: var(--tv-FallMenu-box-border-radius);
    .opacity(0);

    .contbox {
      overflow: hidden;
      padding: 32px;
    }

    .cont {
      min-width: 120px;
      padding: 0 16px;
    }

    .sublist {
      li {
        float: left;
        width: 100%;

        h3.mcate-item-hd {
          font-size: var(--tv-FallMenu-box-font-size);
          border-bottom: 0 solid #ccc;
          color: var(--tv-FallMenu-box-title-text-color);
          font-weight: 700;
          margin: 0;
          line-height: 32px;
        }

        p.mcate-item-bd {
          margin-top: 4px;
          line-height: 32px;

          a {
            font-size: var(--tv-FallMenu-box-a-font-size);
            color: var(--tv-FallMenu-box-text-color);
            text-decoration: none;
            display: block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-bottom: 4px;

            &:hover {
              text-decoration: underline;
              color: var(--tv-FallMenu-box-hover-text-color);
            }
          }
        }
      }
    }

    &.active,
    &:hover {
      box-shadow: 0 4px 16px 0 #14000000;
      border-radius: 0 0 6px 6px;
      .opacity(1);
    }
  }
}

@keyframes leftArrow {
  0% {
    left: -17px;
  }

  50% {
    left: -13px;
  }

  100% {
    left: -17px;
  }
}

@keyframes rightArrow {
  0% {
    right: -17px;
  }

  50% {
    right: -13px;
  }

  100% {
    right: -17px;
  }
}
