@use '../../style/themes/default.scss' as *;
@use '../../style/util.scss' as *;

/* 顶栏 */
.ele-admin-header {
  display: flex;
  align-items: center;
  height: eleVar('header', 'height');
  line-height: eleVar('header', 'height');
  background: eleVar('header', 'bg');
  box-shadow: eleVar('header', 'shadow');
  transition: (padding $ele-transition, box-shadow $ele-transition);
  z-index: calc(#{eleVar('layout', 'index')} + 3);
  flex-shrink: 0;

  &.is-ghost {
    background: hsla(0, 0%, 100%, 0.04);
    backdrop-filter: blur(8px);
  }

  /* 图标 */
  .ele-admin-logo {
    color: eleVar('logo', 'color');
    width: eleVar('sidebar', 'width');
    height: eleVar('header', 'height');
    background: eleVar('sidebar', 'bg');
    box-shadow: eleVar('logo', 'shadow');
    transition: (width $ele-transition, left $ele-transition);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    & > img + h1 {
      margin: 0 0 0 10px;
      font-weight: normal;
      text-overflow: ellipsis;
      word-break: break-all;
      white-space: nowrap;
      overflow: hidden;
    }
  }

  /* 面包屑 */
  .ele-admin-breadcrumb {
    $tool-padding: eleVar('header', 'tool-padding');
    flex-shrink: 0;
    margin-left: calc(#{eleVar('header', 'tools-padding')} + #{$tool-padding});
  }

  /* 菜单 */
  .ele-admin-menus {
    flex: 1;
    overflow: hidden;

    & > .ele-menu {
      $menu-height: eleVar('header', 'menu-height');
      #{eleVarName('menu-horizontal', 'height')}: #{$menu-height};
      padding-top: 0;
      padding-bottom: 0;
      background: none;
      border: none;
    }
  }

  /* 页签栏 */
  & > .ele-admin-tabs {
    flex: 1;
    overflow: hidden;
    line-height: normal;

    &.ele-tab-wrap {
      padding-right: 0;
      background: none;
      box-shadow: none;
    }

    & + .ele-admin-tools {
      padding-left: 0;
    }

    &.is-simple,
    &.is-indicator {
      align-self: flex-end;
    }
  }

  & > .ele-admin-tabs.ele-tab-wrap.is-simple,
  & > .ele-admin-tabs.ele-tab-wrap.is-indicator,
  & > .ele-tab-wrap .ele-tabs.is-simple,
  & > .ele-tab-wrap .ele-tabs.is-indicator {
    $height: eleVar('header', 'height');
    $tool-height: eleVar('header', 'tool-height');
    $tab-height: calc(#{$height} - (#{$height} - #{$tool-height}) / 2);
    #{eleVarName('tab', 'height')}: #{$tab-height};
  }
}

/* 工具栏 */
.ele-admin-tools {
  display: flex;
  align-items: center;
  padding: 0 eleVar('header', 'tools-padding');
  box-sizing: border-box;
  flex-shrink: 0;
  height: 100%;

  & + .ele-admin-breadcrumb {
    margin-left: 0;
  }

  & + .ele-admin-tabs {
    &.ele-tab-wrap,
    &:not(.is-fixed-home) .el-tabs__nav-wrap:not(.is-scrollable) .el-tabs__nav {
      padding-left: 0;
    }
  }

  & + .is-simple,
  & + .is-indicator {
    &.is-fixed-home,
    &:not(.is-fixed-home) .el-tabs__nav-wrap:not(.is-scrollable) .el-tabs__nav {
      padding-left: eleVar('tab', 'simple-angle-size');
    }
  }

  & + .is-button {
    &.is-fixed-home,
    &:not(.is-fixed-home) .el-tabs__nav-wrap:not(.is-scrollable) .el-tabs__nav {
      padding-left: eleVar('tab', 'button-space');
    }
  }
}

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

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

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