@import (reference) './extend.less';
@import (reference) './lib/container.less';

.main(@nav-background: @layout-header-background,
  @nav-box-shadow-color: fade(@black, 25%),
  @nav-scrollbar-background: fade(@white, 30%),
  @nav-app-color: fade(@white, 35%),
  @logo-color: @white,
  @logo-box-shadow: none,
  @header-action-color: fade(@white, 60%),
  @header-action-hover-color: @white,
  @header-action-hover-background: fade(@white, 20%)) {
  .yo-layout--spin {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
    >.ant-spin-nested-loading {
      height: 100%;
      >div>.ant-spin {
        max-height: none;
      }
      >.ant-spin-container {
        width: 100%;
        height: 100%;
      }
    }
  }
  .ant-layout-header {
    .header-actions {
      display: flex;
      .header-action {
        display: inline-block;

        padding: 0 @padding-md;

        cursor: pointer;
        transition: @animation-duration-slow;
        transition-property: background-color;
        .anticon {
          font-size: @font-size-base + 6px;

          transition: @animation-duration-slow;
          transition-property: color;
        }
        &:active {
          box-shadow: inset 1px 1px 10px rgba(0, 0, 0, .05);
        }
      }
      .ant-select-auto-complete {
        margin: (@layout-header-height - 10px - 30px) / 2 @padding-md;
        .ant-input-affix-wrapper {
          border: 0;
          background-color: fade(@white, 15%);
          &:focus,
          &-focused {
            background-color: fade(@white, 30%);
          }
          .ant-input {
            color: fade(@white, 85%);
            background-color: transparent;
          }
          .ant-input-suffix {
            .anticon {
              color: fade(@white, 60%);
            }
          }
        }
      }
    }
    .user-container {
      z-index: 10;

      width: 32px + @padding-sm * 2;
      height: @layout-header-height - 24px;
      margin: 2px 0;

      transition: @animation-duration-slow;
      .user-container-inner {
        position: relative;

        transition: @animation-duration-slow;

        border-radius: @border-radius-base;
      }
      .user {
        &--base {
          line-height: @layout-header-height - 24px;

          position: relative;

          display: flex;
          overflow: hidden;
          align-items: center;

          width: 100%;
          height: @layout-header-height - 24px;
          padding: 0 @padding-sm;

          transition: @animation-duration-slow;
        }
        &--avatar {
          box-shadow: 0 0 0 2px @white;
        }
        &--name {
          font-weight: bolder;

          position: absolute;
          left: 32px + @padding-sm * 2;

          transition: @animation-duration-slow;

          opacity: 0;
        }
        &--dropdown {
          width: 200px;

          transition: @animation-duration-base;
          transform: scaleY(0);
          transform-origin: top;

          opacity: 0;
          .ant-dropdown-menu {
            box-shadow: none;
          }
        }
      }
      &.open {
        width: 200px;
        .user-container-inner {
          background-color: @white;
          box-shadow: @box-shadow-base;
        }
        .user {
          &--name {
            opacity: 1;
          }
        }
      }
      &.drop {
        .user {
          &--dropdown {
            transform: scaleY(1);

            opacity: 1;
          }
        }
      }
    }
  }
  .ant-layout-content {
    position: relative;

    overflow-y: auto;
    >.yo-tab-external-mount {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;

      display: flex;
      flex-direction: column;

      width: 100%;
      >.ant-tabs {
        z-index: 5;

        overflow: visible;
        >.ant-tabs-nav {
          margin-bottom: 0;

          border-bottom: 0;
          background-color: @white;
          box-shadow: 0 2px 12px fade(@black, 8%);
          &::before {
            content: none;
          }
          .ant-tabs-nav-container {
            height: 30px;
            margin-bottom: 0;
          }
          .ant-tabs-tab {
            line-height: 30px;

            height: 30px;
            margin-right: 0;
            padding: 0;

            transition: none;

            border: 0;
            background-color: transparent;
            &:hover {
              color: @black;
            }
            .ant-tabs-tab-btn {
              transition: none;
            }
            &.ant-tabs-tab-active {
              border-color: darken(@primary-color, 10%);
              background-color: @primary-color;
              .ant-tabs-tab-btn {
                color: @white;
              }
              .ant-tabs-tab-remove {
                color: fade(@white, 70%);
                &:hover {
                  color: @white;
                }
              }
            }
            .yo-layout-tab-subtitle {
              line-height: 1;

              display: inline-block;
              overflow: hidden;

              max-width: 150px;

              transform: translateY(1px);
              white-space: nowrap;
              text-overflow: ellipsis;

              opacity: .75;
            }
            +.ant-tabs-tab {
              margin-left: 0;
              &::before {
                position: absolute;
                left: -.5px;

                width: 1px;
                height: 24px;

                content: '';
                transform: scaleX(.5);

                background: linear-gradient(transparent, fade(@black, 30%), transparent);
              }
            }
            .ant-dropdown-trigger {
              padding: 0 @padding-md * 2 0 @padding-md;
            }
            .ant-tabs-tab-unclosable {
              .ant-dropdown-trigger {
                padding: 0 @padding-lg 0 @padding-md;
              }
            }
            .ant-tabs-tab-remove {
              line-height: 28px;

              position: absolute;
              top: 0;
              right: 0;

              margin: 0;

              transition: none;
            }
          }
          .ant-tabs-nav-more {
            padding: 5px @padding-md;
          }
        }
      }
      >.yo-tab-external-mount-content {
        position: relative;

        height: 100%;
        >.yo-tab-external-tabpane {
          position: absolute;
          top: 0;
          left: 0;

          overflow-x: hidden;
          overflow-y: auto;

          width: 100%;
          height: 100%;
          &.yo-tab-external-tabpane-inactive {
            pointer-events: none;

            opacity: 0;
          }
        }
      }
    }
  }
  .ant-layout-sider {
    .ant-menu-inline {
      border-right: 0;
    }
  }
  .yo-nav {
    padding-top: @padding-lg;
    padding-bottom: @padding-lg;
    &--row {
      padding: 1px 0;

      column-gap: @padding-md;
      column-count: 3;
    }
    &--col {
      break-inside: avoid;
    }
    &--sub-item {
    }
    &--item-group {
      font-size: @font-size-base;
      line-height: 1.5;

      margin-bottom: @padding-xs;
      padding-top: @padding-xs * 2;

      color: fade(@black, 35%);
      border: @border-width-base @border-style-base transparent;
    }
    &--item {
      font-size: @font-size-base;
      line-height: 1.5;

      position: relative;

      margin-bottom: @padding-xs;
      padding: @padding-xs @padding-sm;

      cursor: pointer;
      transition: @animation-duration-fast;

      border: @border-width-base @border-style-base @border-color-split;
      border-radius: @border-radius-base;
      background-color: @white;
      &:hover {
        color: @white;
        border-color: @primary-color;
        background-color: @primary-color;
      }
    }
  }
  .yo-layout-sider {
    height: 100%;

    background-color: @nav-background;
    .ant-layout-sider-children {
      display: flex;
      flex-direction: column;
    }
    .logo {
      font-size: @font-size-lg * 1.5;
      font-weight: 500;
      line-height: @layout-header-height + 10px;

      z-index: 11;

      display: flex;
      overflow: hidden;
      align-items: center;
      flex: 0 0 @layout-header-height + 10px;

      height: @layout-header-height + 10px;
      padding: 0 @padding-md 0 @padding-lg;

      color: @logo-color;
      box-shadow: @logo-box-shadow;
      img {
        max-height: 100%;
      }
      span {
        margin-left: @padding-sm;

        transition: @animation-duration-slow;
        transition-property: opacity;
      }
    }
    &.ant-layout-sider-collapsed {
      .logo {
        span {
          opacity: 0;
        }
      }
    }
    .yo-sider-nav {
      position: relative;
      z-index: 10;

      flex: 1 1 100%;

      box-shadow: 2px 0 8px @nav-box-shadow-color;
      &--app {
        font-size: @font-size-sm;

        margin-top: @padding-sm;
        padding: 0 @padding-md;

        color: @nav-app-color;
      }
    }
    .swiper-container {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;

      width: 100%;
      .swiper-scrollbar {
        transition: @animation-duration-slow;
        transition-property: opacity;

        opacity: 0;
      }
      .swiper-scrollbar-drag {
        background-color: @nav-scrollbar-background;
      }
      &:hover {
        .swiper-scrollbar {
          opacity: 1;
        }
      }
    }
    .swiper-slide {
      height: auto;
      min-height: 100%;
      >.ant-spin-nested-loading {
        height: 100%;
        .ant-spin-blur {
          &::after {
            opacity: 0;
          }
        }
      }
    }
  }
  .yo-layout--left-menu,
  .yo-layout--right-menu {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
    .ant-layout-header {
      line-height: @layout-header-height - 20px;

      z-index: 6;

      height: @layout-header-height - 20px;
      padding: 0;

      background-color: @white;
      >section {
        display: flex;
        justify-content: space-between;
      }
      .header-actions {
        .header-action {
          line-height: @layout-header-height - 16px;

          height: @layout-header-height - 20px;
          .anticon {
            color: fade(@black, 35%);
          }
          &:hover {
            background-color: fade(@black, 5%);
            .anticon {
              color: @icon-color-hover;
            }
          }
        }
      }
    }
    >section {
      >.ant-layout-sider {
        .yo-layout-sider();
      }
    }
  }
  .yo-layout--top-nav {
    position: absolute;
    top: 0;
    left: 0;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: @container-width;
    height: 100%;

    @layout-header-height: 54px;
    .ant-layout-header {
      line-height: @layout-header-height;

      z-index: 11;

      flex: 0 0 @layout-header-height;

      height: @layout-header-height;
      padding: 0;

      background-color: @nav-background;
      section {
        display: flex;
        justify-content: space-between;

        height: 100%;
      }
      .header-actions {
        .header-action {
          .anticon {
            color: @header-action-color;
          }
          &:hover {
            background-color: @header-action-hover-background;
            .anticon {
              color: @header-action-hover-color;
            }
          }
        }
      }
      .user-container {
        margin: (@layout-header-height - 40px) / 2 0;
      }
      .logo {
        font-size: @font-size-lg * 1.5;
        font-weight: 500;
        line-height: @layout-header-height - 10px;

        display: flex;
        overflow: hidden;
        align-items: center;

        height: @layout-header-height 10px;
        margin: 5px @padding-lg 5px 0;

        color: @logo-color;
        img {
          max-height: 100%;
        }
        span {
          margin-left: @padding-sm;
        }
      }
      .ant-menu-horizontal {
        line-height: @layout-header-height;

        border-bottom: 0;
        >.ant-menu-submenu {
          top: 0;

          border-bottom: 0;
        }
      }
      .header-actions {
        .header-action {
          line-height: @layout-header-height - 16px;

          margin: 10px 0;
        }
      }
    }
    &--container {
      .ant-layout-header {
        .ant-menu-horizontal {
          width: 400px;
        }
      }
      .ant-layout-content {
        .yo-tab-external-mount {
          >.ant-tabs {
            >.ant-tabs-bar {
              .ant-tabs-nav-container {
                width: @container-width - @padding-md * 2;
                margin: 0 auto;
              }
            }
          }
        }
      }
    }
    &--container-fluid {
      .ant-layout-header {
        .ant-menu-horizontal {
          width: 800px;
        }
        @media (max-width: 1400px) {
          .ant-menu-horizontal {
            width: 600px;
          }
        }
      }
    }
  }
}