@import (reference) './extend.less';
@import (reference) './lib/container.less';
@import (reference) './lib/text-color.less';
.yo-layout--spin {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background-color: @layout-header-background;
  >.ant-spin-nested-loading {
    height: 100%;
    >div>.ant-spin {
      max-height: none;
      @-webkit-keyframes borderScale {
        0% {
          border: 5px solid white;
        }
        50% {
          border: 25px solid transparent;
        }
        100% {
          border: 5px solid white;
        }
      }
      @keyframes borderScale {
        0% {
          border: 5px solid white;
        }
        50% {
          border: 25px solid transparent;
        }
        100% {
          border: 5px solid white;
        }
      }
      .loader-container {
        position: absolute;
        top: 50%;
        left: 50%;

        box-sizing: content-box;
        width: 200px;
        height: 200px;
        margin: 0 auto;
        margin-right: -50%;

        transform: translate(-50%, -50%);
        -webkit-animation: borderScale 1s infinite ease-in-out;
                animation: borderScale 1s infinite ease-in-out;

        color: white;
        border: 5px solid transparent;
        border-radius: 50%;
        >p {
          font-family: 'Raleway', sans-serif;
          font-size: 2em;
          font-weight: bold;

          position: absolute;
          top: 50%;
          left: 50%;

          margin-right: -50%;

          transform: translate(-50%, -50%);
        }
      }
    }
    >.ant-spin-container {
      width: 100%;
      height: 100%;
      &.ant-spin-blur {
        opacity: 0;
      }
    }
  }
}
.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);
      }
      // 特殊工具按钮
      .theme-toggle {
        position: relative;

        overflow: hidden;

        width: 20px;
        height: 20px;
        margin: 7px 0;

        border-radius: 50%;
        &--real {
          position: relative;

          width: 20px;
          height: 20px;

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

          border-radius: 50%;
          background-color: fade(@white, 60%);
          &::before {
            position: absolute;
            top: 5px;
            left: 5px;

            width: 10px;
            height: 10px;

            content: '';
            transition: @animation-duration-slow transform;
            transform: scale(0);

            border: 2px solid @layout-header-background;
            border-radius: 50%;
          }
        }
        &--imaginary {
          position: absolute;
          top: 6px;
          right: -6px;

          width: 18px;
          height: 18px;

          transition: @animation-duration-slow transform;
          transform: rotate(45deg) scaleY(1);
          transform-origin: top right;

          border-radius: 50%;
          background-color: @layout-header-background;
        }
      }
      &:hover {
        .theme-toggle {
          &--real {
            background-color: @white;
            &::before {
              transform: scale(1);
            }
          }
          &--imaginary {
            transform: rotate(45deg) scaleY(0);
          }
        }
      }
    }
    .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;
      }
    }
  }
}
.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: @layout-header-background;
        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: @white;
          }
          .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;
        }
        >iframe {
          display: block;

          width: 100%;
          height: 100%;

          border: 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: @layout-header-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: @white;
    box-shadow: none;
    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 fade(@black, 25%);
    &--app {
      font-size: @font-size-sm;

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

.text-gray();
    }
    .ant-menu {
      background-color: @layout-header-background;
    }
    .ant-menu-sub.ant-menu-inline {
      background-color: fade(@white, 4%);
    }
  }
  .swiper-container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;

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

      opacity: 0;
      border-radius: @border-radius-base;
    }
    .swiper-scrollbar-drag {
      border-radius: @border-radius-base;
      background-color: fade(@white, 30%);
    }
    &: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;

        color: fade(@black, 35%);
        .anticon {
          color: fade(@black, 35%);
        }
        &:hover {
          color: @icon-color-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%;
  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: @layout-header-background;
    section {
      display: flex;
      justify-content: space-between;

      height: 100%;
    }
    .header-actions {
      .header-action {
        color: fade(@white, 60%);
        .anticon {
          color: fade(@white, 60%);
        }
        &:hover {
          color: @white;
          background-color: fade(@white, 20%);
          .anticon {
            color: @white;
          }
        }
      }
    }
    .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: @white;
      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;
        }
      }
    }
  }
}
.yo-user-popover {
  width: 280px;
  padding-top: 0;
  .ant-popover-arrow {
    display: none;
  }
  .ant-popover-inner-content {
    padding: 0;
  }
}
.yo-popover-infinite-scroll {
  .ant-popover-inner-content {
    overflow-y: auto;

    max-height: 300px;
  }
}
