@import '../variables.less';

.demo-content {
  height: 100vh;
  background-color: @color-grey-f5;

  .demo {
    padding: 40px;
    background-color: @color-grey-f5;

    .head-box {
      padding: 24px 0 64px 0;
      display: flex;
      flex-direction: column;

      .logo {
        width: 128px;
        height: 128px;
        margin-bottom: 16px;
      }

      .font {
        width: 312px;
        height: 48px;
        margin-bottom: 28px;
      }

      .title {
        font-size: @font-size-14;
        color: @color-grey-99;
      }
    }

    .menu-box {
      .menu-cell {
        padding: 24px 32px;
        background-color: @color-white;
        border-radius: 16px;
        margin-bottom: 24px;
        display: flex;

        .menu:first-child {
          height: 80px;
        }

        .menu {
          font-size: @font-size-16;
          font-weight: 400;
          color: @color-grey-33;
          display: flex;
          justify-content: space-between;
          flex-direction: row;
          align-items: center;

          .arrow {
            height: 24px;
            width: 24px;

            &-active {
              @keyframes activeMenu {
                0% {
                  transform: rotate(180deg);
                }

                100% {
                  transform: rotate(360deg);
                }
              }

              animation: activeMenu 0.3s linear;
            }
          }
        }

        .child-menu {
          color: @color-grey-66;
          font-size: @font-size-14;
          line-height: 28px;
          height: 76px;
        }

        .menu-contain {
          .menu:first-child {
            height: 76px;
          }

          @keyframes showMenu {
            0% {
              transform: scaleY(0);
              transform-origin: 0 0 0;
            }

            100% {
              transform: scaleY(1);
              transform-origin: 100% 0 0;
            }
          }

          animation: showMenu 0.25s linear;
        }
      }
    }
  }
}