/* 主题风格 */
@import '../../style/themes/default.less';

/* 固定顶栏 */
.ele-admin-fixed-header:not(.ele-admin-fixed-body) {
  padding-top: @header-height;

  .ele-admin-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  &.ele-admin-show-tabs .ele-admin-body {
    padding-top: @tabs-height;
  }

  .ele-admin-tabs {
    position: fixed;
    left: 0;
    right: 0;
    top: @header-height;
    transition: left @sidebar-transition-anim;
  }

  .ele-admin-sidebar + .ele-admin-body .ele-admin-tabs {
    left: @sidebar-width;
  }

  &.ele-admin-collapse .ele-admin-sidebar + .ele-admin-body .ele-admin-tabs {
    left: @sidebar-collapse-width;
  }

  &:not(.ele-admin-fixed-sidebar) {
    .ele-admin-sidebar,
    .ele-admin-sidebar-nav {
      z-index: calc(@layout-z-index + 1);
    }

    &:not(.ele-admin-logo-auto):not(.ele-admin-side-dark) {
      .ele-admin-logo {
        box-shadow: 0 -1px 0 @border-color-split inset;
      }

      &.ele-admin-head-dark .ele-admin-logo,
      &.ele-admin-tab-card .ele-admin-logo,
      &:not(.ele-admin-show-tabs) .ele-admin-logo {
        box-shadow: none;
      }
    }
  }

  &.ele-admin-side-mix {
    .ele-admin-sidebar + .ele-admin-body .ele-admin-tabs {
      left: calc(@sidebar-width - @sidebar-collapse-width + @sidebar-nav-width);
    }

    .ele-admin-sidebar-nav + .ele-admin-body .ele-admin-tabs {
      left: @sidebar-nav-width;
    }

    &.ele-admin-nav-collapse {
      .ele-admin-sidebar + .ele-admin-body .ele-admin-tabs {
        left: @sidebar-width;
      }

      .ele-admin-sidebar-nav + .ele-admin-body .ele-admin-tabs {
        left: @sidebar-collapse-width;
      }
    }

    &.ele-admin-collapse {
      .ele-admin-sidebar + .ele-admin-body .ele-admin-tabs {
        left: @sidebar-nav-width;
      }

      &.ele-admin-nav-collapse .ele-admin-sidebar {
        & + .ele-admin-body .ele-admin-tabs {
          left: @sidebar-collapse-width;
        }
      }
    }
  }
}

/* 固定侧栏 */
.ele-admin-fixed-sidebar:not(.ele-admin-fixed-body) {
  .ele-admin-sidebar,
  .ele-admin-sidebar-nav {
    position: fixed;
    left: 0;
    bottom: 0;
    top: @header-height;
  }

  &:not(.ele-admin-fixed-header):not(.ele-admin-logo-auto) .ele-admin-logo {
    position: fixed;
    top: 0;
    left: 0;
  }

  &.ele-admin-logo-auto:not(.ele-admin-fixed-header) {
    .ele-admin-sidebar-nav,
    &:not(.ele-admin-side-mix) .ele-admin-sidebar {
      top: 0;
      z-index: calc(@layout-z-index + 3);
    }
  }

  .ele-admin-body {
    width: 100%;
  }

  .ele-admin-header,
  .ele-admin-sidebar + .ele-admin-body,
  .ele-admin-sidebar-nav + .ele-admin-body {
    padding-left: @sidebar-width;
    transition: padding-left @sidebar-transition-anim,
      box-shadow @sidebar-transition-anim;
  }

  &.ele-admin-collapse {
    .ele-admin-sidebar + .ele-admin-body,
    &:not(.ele-admin-fixed-header):not(.ele-admin-side-mix) .ele-admin-header {
      padding-left: @sidebar-collapse-width;
    }
  }

  &.ele-admin-side-mix {
    &.ele-admin-collapse .ele-admin-body {
      width: 100%;
    }

    .ele-admin-sidebar {
      left: @sidebar-nav-width;
    }

    .ele-admin-header,
    .ele-admin-sidebar + .ele-admin-body,
    .ele-admin-sidebar-nav + .ele-admin-body {
      padding-left: @sidebar-nav-width;
    }

    &:not(.ele-admin-fixed-header) {
      .ele-admin-sidebar {
        position: relative;
        top: auto;
      }
    }

    &.ele-admin-nav-collapse {
      .ele-admin-body {
        width: 100%;
      }

      .ele-admin-header,
      .ele-admin-sidebar + .ele-admin-body,
      .ele-admin-sidebar-nav + .ele-admin-body {
        padding-left: @sidebar-collapse-width;
      }

      .ele-admin-sidebar {
        left: @sidebar-collapse-width;
      }
    }
  }

  &.ele-admin-fixed-header {
    .ele-admin-header {
      padding-left: 0;
    }

    &.ele-admin-side-mix {
      .ele-admin-sidebar + .ele-admin-body {
        padding-left: calc(
          @sidebar-width - @sidebar-collapse-width + @sidebar-nav-width
        );
      }

      &.ele-admin-collapse {
        .ele-admin-sidebar + .ele-admin-body {
          padding-left: @sidebar-nav-width;
        }
      }

      &.ele-admin-nav-collapse {
        .ele-admin-header {
          padding-left: 0;
        }

        .ele-admin-sidebar {
          left: @sidebar-collapse-width;
        }

        .ele-admin-sidebar + .ele-admin-body {
          padding-left: @sidebar-width;
        }

        &.ele-admin-collapse .ele-admin-sidebar + .ele-admin-body {
          padding-left: @sidebar-collapse-width;
        }
      }
    }
  }
}

/* 固定主体 */
.ele-admin-fixed-body {
  .ele-admin-content {
    height: calc(100vh - @header-height);
    overflow-x: hidden;
    overflow-y: auto;
  }

  .ele-admin-sidebar,
  .ele-admin-sidebar-nav {
    height: calc(100vh - @header-height);
  }

  &.ele-admin-show-tabs {
    .ele-admin-content {
      height: calc(100vh - @header-height - @tabs-height);
    }

    &.ele-admin-tab-card .ele-admin-content {
      height: calc(100vh - @header-height - @tabs-height - @tabs-card-padding);
    }
  }
}

/* 全屏内容区域 */
.ele-admin-body-fullscreen {
  padding-top: 0 !important;

  .ele-admin-header,
  .ele-admin-sidebar,
  .ele-admin-sidebar-nav {
    display: none;
  }

  .ele-admin-body {
    min-height: 100vh;
    padding-left: 0 !important;
    width: 100% !important;
  }

  .ele-admin-tabs {
    left: 0 !important;
    top: 0 !important;
  }

  &.ele-admin-fixed-body {
    .ele-admin-content {
      height: 100vh !important;
    }

    &.ele-admin-show-tabs:not(.ele-admin-content-fullscreen) {
      .ele-admin-content {
        height: calc(100vh - @tabs-height) !important;
      }

      &.ele-admin-tab-card .ele-admin-content {
        height: calc(100vh - @tabs-height - @tabs-card-padding) !important;
      }
    }
  }

  &.ele-admin-content-fullscreen {
    .ele-admin-body {
      padding-top: 0 !important;
    }

    .ele-admin-tabs {
      display: none;
    }
  }
}

/* 主体内容定宽 */
.ele-admin-body-limit .ele-body {
  max-width: @body-limit-width;
  margin: 0 auto;
}

/* logo 宽度自适应 */
.ele-admin-logo-auto.ele-admin-layout {
  .ele-admin-logo {
    width: auto;
    padding: 0 @padding-sm 0 @padding-lg;
    color: @logo-light-color;
    background: none;
    box-shadow: none;
    transition: none;

    & > span {
      display: inline;
    }

    & + .ele-admin-header-nav {
      margin-left: @padding-sm;
    }
  }

  .ele-admin-sidebar,
  .ele-admin-sidebar-nav {
    z-index: calc(@layout-z-index + 1);
  }

  &.ele-admin-head-dark .ele-admin-logo {
    color: @logo-dark-color;
  }
}