@use '../../style/themes/default.scss' as *;
@use '../../style/util.scss' as *;
@use './css-var.scss' as *;
@use './tabs.scss';
@use './header.scss';
@use './sidebar.scss';

@include set-layout-var($y);

.y-admin-layout {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: yVar('layout', 'bg');
  box-sizing: border-box;
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;

  & > .y-admin-header {
    z-index: calc(#{yVar('layout', 'index')} + 4);
  }
}

.y-admin-main,
.y-admin-body,
.y-admin-wrapper,
.y-admin-content {
  flex: auto;
  display: flex;
  flex-direction: column;
}

.y-admin-layout.is-row-direction,
.y-admin-main.is-row-direction {
  flex-direction: row;
}

.y-admin-wrapper {
  position: relative;

  & > .y-backtop {
    z-index: calc(#{yVar('layout', 'index')} + 1);
  }
}

/* 主体宽度 */
.y-admin-layout.is-row-direction > .y-admin-main,
.y-admin-main.is-row-direction > .y-admin-body {
  flex: 0 1 auto;
  transition: width $transition-base;
  width: 100%;
}

.y-admin-layout > .y-admin-side + .y-admin-main,
.y-admin-main > .y-admin-side + .y-admin-body {
  width: calc(100% - #{yVar('sidebar', 'width')});
}

.y-admin-side.is-collapse + .y-admin-main,
.y-admin-side.is-collapse + .y-admin-body {
  width: calc(100% - #{yVar('sidebar', 'collapse-width')});
}

.y-admin-side.is-mix + .y-admin-main,
.y-admin-side.is-mix + .y-admin-body {
  $box-width: yVar('sidebox', 'width');
  width: calc(100% - #{yVar('sidebar', 'mix-width')} - #{$box-width});
}

.y-admin-side.is-mix.is-collapse + .y-admin-main,
.y-admin-side.is-mix.is-collapse + .y-admin-body {
  width: calc(100% - #{yVar('sidebox', 'width')});
}

.y-admin-side.is-compact + .y-admin-main,
.y-admin-side.is-compact + .y-admin-body {
  $box-width: yVar('sidebar', 'collapse-width');
  width: calc(100% - #{yVar('sidebar', 'mix-width')} - #{$box-width});
}

.y-admin-side.is-compact.is-collapse + .y-admin-main,
.y-admin-side.is-compact.is-collapse + .y-admin-body {
  width: calc(100% - #{yVar('sidebar', 'collapse-width')});
}

.y-admin-side.is-box + .y-admin-main,
.y-admin-side.is-box + .y-admin-body {
  width: calc(100% - #{yVar('sidebox', 'width')});
}

.y-admin-side.is-box.is-compact + .y-admin-main,
.y-admin-side.is-box.is-compact + .y-admin-body {
  width: calc(100% - #{yVar('sidebar', 'collapse-width')});
}

.y-admin-layout.is-row-direction.is-mobile > .y-admin-main,
.y-admin-layout.is-row-direction.is-fixed-body > .y-admin-main,
.y-admin-layout.is-fixed-body > .y-admin-main > .y-admin-body,
.y-admin-layout.is-row-direction.is-maximized > .y-admin-main,
.y-admin-layout.is-maximized > .y-admin-main > .y-admin-body {
  width: 100%;
}

.y-admin-layout {
  /* 固定主体 */
  &.is-fixed-body {
    height: 100vh;
    height: 100dvh;
  }

  &.is-fixed-body > .y-admin-main,
  &.is-fixed-body > .y-admin-main > .y-admin-body,
  &.is-fixed-body > .y-admin-main > .y-admin-side,
  &.is-fixed-body > .y-admin-side {
    height: 100%;
  }

  &.is-fixed-body > .y-admin-main,
  &.is-fixed-body > .y-admin-main > .y-admin-body,
  &.is-fixed-body > .y-admin-main > .y-admin-body > .y-admin-wrapper {
    overflow: auto;
  }

  &.is-fixed-body > .y-admin-main > .y-admin-body > .y-admin-wrapper {
    & > .y-admin-content {
      overflow-x: hidden;
      overflow-y: auto;
    }

    & > .y-backtop {
      z-index: yVar('layout', 'index');
    }
  }

  /* 内容全屏 */
  &.is-maximized > .y-admin-header,
  &.is-maximized > .y-admin-main > .y-admin-header,
  &.is-maximized > .y-admin-main > .y-admin-side,
  &.is-maximized > .y-admin-side,
  &.is-expanded > .y-admin-main > .y-admin-body > .y-admin-tabs {
    display: none;
  }

  /* 移动端风格 */
  &.is-mobile > .y-admin-side {
    width: 0;
    z-index: calc(#{yVar('layout', 'mask-index')} + 1);
    clip-path: none !important;

    & > .y-admin-sidebar:not(.is-dark),
    & > .y-admin-sidebox:not(.is-dark) {
      background: yVar('sidebar', 'mobile-bg');
      backdrop-filter: yVar('sidebar', 'mobile-backdrop-filter');
    }

    & > .y-admin-sidebar.is-dark,
    & > .y-admin-sidebox.is-dark {
      background: yVar('sidebar', 'mobile-dark-bg');
      backdrop-filter: yVar('sidebar', 'mobile-dark-backdrop-filter');
    }
  }

  &.is-collapse > .y-admin-side {
    & > .y-admin-sidebar,
    & > .y-admin-sidebox {
      visibility: hidden;
    }

    & > .y-admin-sidebar {
      transform: translateX(-100%);
    }

    & > .y-admin-sidebar.is-mix,
    & > .y-admin-sidebox {
      $mix-width: yVar('sidebar', 'mix-width');
      $box-width: yVar('sidebox', 'width');
      transform: translateX(calc(#{$box-width} * -1 - #{$mix-width}));
    }
  }

  &.is-collapse > .y-admin-mask,
  &:not(.is-mobile) > .y-admin-mask {
    visibility: hidden;
    opacity: 0;
  }

  /* 禁用过渡效果 */
  &.is-transition-disabled {
    & > .y-admin-header,
    & > .y-admin-main > .y-admin-header,
    & > .y-admin-main > .y-admin-side > .y-admin-sidebar,
    & > .y-admin-main > .y-admin-side > .y-admin-sidebox,
    & > .y-admin-side > .y-admin-sidebar,
    & > .y-admin-side > .y-admin-sidebox,
    & > .y-admin-main,
    & > .y-admin-main > .y-admin-body {
      transition: none !important;
    }
  }
}

/* logo */
.y-admin-logo,
.y-admin-logo-title {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: yVar('logo', 'color');
  font-size: yVar('logo', 'size');
  font-family: yVar('logo', 'family');
  height: yVar('header', 'height');
  position: relative;
  overflow: hidden;

  h1 {
    margin: 0;
    font-weight: 600;
    font-size: inherit;
    word-break: break-all;
    white-space: nowrap;
    overflow: hidden;
  }
}

.y-admin-logo > img {
  width: 30px;
  height: 30px;

  & + h1 {
    margin-left: 8px;
  }
}

.y-admin-sidebar.is-collapse > .y-admin-logo > img + h1 {
  display: none;
}

.y-admin-header > .y-admin-logo {
  $tool-padding: yVar('header', 'tool-padding');
  margin-left: calc(#{yVar('header', 'tools-padding')} + #{$tool-padding});
}

.y-admin-header.is-dark > .y-admin-logo,
.y-admin-header.is-primary > .y-admin-logo,
.y-admin-sidebar.is-dark > .y-admin-logo,
.y-admin-sidebar.is-dark > .y-admin-logo-title,
.y-admin-sidebox.is-dark > .y-admin-logo {
  color: yVar('logo', 'dark-color');
}

/* 操作按钮 */
.y-admin-tool {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: yVar('header', 'tool-height');
  padding: 0 yVar('header', 'tool-padding');
  border-radius: yVar('header', 'tool-radius');
  transition: (color $transition-base, background-color $transition-base);
  box-sizing: border-box;
  cursor: pointer;

  &:hover {
    background: yVar('header', 'tool-hover-bg');
  }

  & > .el-dropdown {
    color: inherit;
    cursor: inherit;
    font-size: inherit;
    line-height: inherit;
    align-items: center;
    height: 100%;
  }
}

.y-admin-header.is-dark .y-admin-tool:hover,
.y-admin-header.is-primary .y-admin-tool:hover,
.y-admin-sidebar.is-dark .y-admin-tool:hover,
.y-admin-sidebox.is-dark .y-admin-tool:hover {
  background: yVar('header', 'dark-tool-hover-bg');
}

.y-admin-sidebar .y-admin-tool,
.y-admin-sidebox .y-admin-tool {
  height: yVar('sidebar', 'tool-height');
  padding: 0;
}

.y-admin-sidebar.is-dark .y-admin-tool,
.y-admin-sidebox.is-dark .y-admin-tool {
  color: yVar('header', 'dark-color');
}

/* 模态框容器 */
.y-admin-modals {
  flex-shrink: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: yVar('layout', 'index');
}

/* 遮罩 */
.y-admin-mask {
  flex-shrink: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: yVar('layout', 'mask-index');
  background: elVar('overlay-color', 'lighter');
  transition: all $transition-base;
}