@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%),
  @logo-color: @white,
  @logo-box-shadow: none,
  @app-selector-color: @white,
  @app-selector-border-color: fade(@white, 10%),
  @app-selector-background-color: fade(@white, 30%),
  @app-selector-box-shadow-color: fade(@white, 15%),
  @header-action-color: fade(@white, 60%),
  @header-action-hover-color: @white,
  @header-action-hover-background: fade(@white, 20%),
  @header-search-color: @white,
  @header-search-background: fade(@white, 15%),
  @header-search-focus-background: fade(@white, 30%),
  @header-search-icon-color: fade(@white, 60%),
  @header-search-icon-hover-color: @white,
) {
  .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-input-search,
      >.ant-select-auto-complete {
        display: flex;
        align-items: center;

        margin: 5px @padding-md;
        .ant-input {
          height: 34px;
          padding: 5px 30px 5px 11px;

          transition: @animation-duration-slow;
          transition-property: background-color;

          border-color: transparent;
          &:focus {
            box-shadow: none;
          }
        }
        .ant-select-selection {
          background-color: transparent;
        }
      }
    }
    .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 {
          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;
    >.ant-tabs {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;

      display: flex;
      flex-direction: column;

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

        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-active {
            color: @white;
            border-color: darken(@primary-color, 10%);
            background-color: @primary-color;
            .ant-tabs-close-x {
              color: fade(@white, 70%);
              &:hover {
                color: @white;
              }
            }
          }
          +.ant-tabs-tab {
            margin-left: 0;
          }
          .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-close-x {
            position: absolute;
            top: 9px;
            right: 9px;

            margin: 0;

            transition: none;
          }
        }
      }
      >.ant-tabs-content {
        position: relative;

        height: 100%;
        >.ant-tabs-tabpane {
          position: absolute;
          top: 0;
          left: 0;

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

          width: 100%;
          height: 100%;
          >.ant-spin {
            position: absolute;
            top: 0;
            left: 0;

            display: flex;
            overflow: auto;
            align-items: center;
            justify-content: center;

            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
  .ant-layout-sider {
    .ant-menu-inline {
      border-right: 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;
            }
          }
        }
        >.ant-input-search,
        >.ant-select-auto-complete {
          .ant-input {
            &:focus {
              background-color: fade(@black, 5%);
            }
          }
        }
      }
    }
    >section {
      >.ant-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;
          background-color: @nav-background;
          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;

          display: flex;
          flex: 1 1 100%;
          flex-direction: column;

          box-shadow: 2px 0 8px @nav-box-shadow-color;
        }
        .swiper-container {
          position: absolute;
          top: (@layout-header-height / 2) + (@padding-xxs * 2);
          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-apps-selector {
          >span {
            line-height: @layout-header-height / 2 - 2px;

            display: block;

            height: @layout-header-height / 2;
            margin: @padding-xxs @padding-xs;

            cursor: pointer;
            transition: @animation-duration-slow box-shadow;
            text-align: center;

            color: @app-selector-color;
            border: @border-width-base @border-style-base @app-selector-border-color;
            border-radius: @border-radius-base;
            background-color: @app-selector-background-color;
            &:hover {
              box-shadow: 0 0 15px @app-selector-box-shadow-color;
            }
          }
        }
      }
    }
  }
  .yo-layout--top-nav {
    position: absolute;
    top: 0;
    left: 0;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: @container-width;
    height: 100%;
    .ant-layout-header {
      flex: 0 0 @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;
            }
          }
        }
        >.ant-input-search,
        >.ant-select-auto-complete {
          .ant-input {
            color: @header-search-color;
            background-color: @header-search-background;
            &:focus {
              background-color: @header-search-focus-background;
            }
          }
          .anticon-search {
            color: @header-search-icon-color;
            &:hover {
              color: @header-search-icon-hover-color;
            }
          }
        }
      }
      .user-container {
        margin: 12px 0;
      }
      .logo {
        font-size: @font-size-lg * 1.5;
        font-weight: 500;
        line-height: @layout-header-height;

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

        height: @layout-header-height;
        margin-right: @padding-lg;

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