/** 全局样式及辅助类 */
@import './themes/default.less';

html {
  overflow: auto;
  overflow: overlay;
}

/* 辅助类 */
body {
  overflow-x: hidden;
  position: relative;

  &.ele-body-limit-width {
    min-width: @body-max-width;

    .ant-form-item .ant-form-item-label {
      padding: 0;
      line-height: inherit;
      white-space: nowrap;
      text-align: right;

      & > label:after {
        display: block;
      }
    }
  }

  // 标题
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0;
    font-weight: normal;
    font-size: @font-size-lg;
  }

  h5 {
    font-size: (@font-size-lg + 2px);
  }

  h4 {
    font-size: (@font-size-lg + 4px);
  }

  h3 {
    font-size: (@font-size-lg + 6px);
  }

  h2 {
    font-size: (@font-size-lg + 8px);
  }

  h1 {
    font-size: (@font-size-lg + 10px);
  }

  // 文字
  .ele-text {
    color: @text-color;
  }

  .ele-text-heading {
    color: @heading-color;
  }

  .ele-text-secondary {
    color: @text-color-secondary;
  }

  .ele-text-placeholder {
    color: @input-placeholder-color;
  }

  a.ele-text,
  a.ele-text-heading,
  a.ele-text-secondary,
  a.ele-text-placeholder {
    &:hover {
      color: ~`colorPalette('@{primary-color}', 5) `;
    }
  }

  .ele-text-primary {
    color: @primary-color;
  }

  .ele-text-success,
  .ele-text-success:hover {
    color: @success-color;
  }

  a.ele-text-success:hover {
    color: ~`colorPalette('@{success-color}', 5) `;
  }

  a.ele-text-success:active {
    color: ~`colorPalette('@{success-color}', 7) `;
  }

  .ele-text-warning,
  .ele-text-warning:hover {
    color: @warning-color;
  }

  a.ele-text-warning:hover {
    color: ~`colorPalette('@{warning-color}', 5) `;
  }

  a.ele-text-warning:active {
    color: ~`colorPalette('@{warning-color}', 7) `;
  }

  .ele-text-danger,
  .ele-text-danger:hover {
    color: @error-color;
  }

  a.ele-text-danger:hover {
    color: ~`colorPalette('@{error-color}', 5) `;
  }

  a.ele-text-danger:active {
    color: ~`colorPalette('@{error-color}', 7) `;
  }

  .ele-text-info,
  a.ele-text-info:hover,
  a.ele-text-info:active {
    color: @normal-color;
  }

  .ele-text-delete {
    text-decoration: line-through;
  }

  .ele-text-small {
    font-size: @font-size-sm !important;
  }

  // 背景和边框
  .ele-bg-base {
    background-color: @layout-body-background !important;
  }

  .ele-bg-primary {
    background-color: @primary-color !important;
  }

  .ele-bg-success {
    background-color: @success-color !important;
  }

  .ele-bg-warning {
    background-color: @warning-color !important;
  }

  .ele-bg-danger {
    background-color: @error-color !important;
  }

  .ele-bg-info {
    background-color: @normal-color !important;
  }

  .ele-bg-white {
    background-color: @component-background !important;
  }

  .ele-border-primary {
    border-color: @primary-color !important;
  }

  .ele-border-success {
    border-color: @success-color !important;
  }

  .ele-border-warning {
    border-color: @warning-color !important;
  }

  .ele-border-danger {
    border-color: @error-color !important;
  }

  .ele-border-info {
    border-color: @normal-color !important;
  }

  .ele-border-base {
    border-color: @border-color-base !important;
  }

  .ele-border-split {
    border-color: @border-color-split !important;
  }

  // 浮动
  .ele-pull-left {
    float: left;
  }

  .ele-pull-right {
    float: right;
  }

  .ele-clear {
    clear: both;
  }

  .ele-clear-after:after {
    content: '';
    clear: both;
    display: block;
  }

  // 对齐方式
  .ele-text-center {
    text-align: center;
  }

  .ele-text-left {
    text-align: left;
  }

  .ele-text-right {
    text-align: right;
  }

  .ele-fluid {
    width: 100% !important;
  }

  .ele-block {
    display: block;
  }

  .ele-inline-block {
    display: inline-block;
  }

  .ele-inline {
    display: inline;
  }

  // 占位元素
  em:not([class]) {
    padding: 0 0.5em;
    font-style: normal;
  }

  s:not([class]) {
    padding: 0 0.125em;
    font-style: normal;
  }
}

/* 文字省略 */
.ele-elip {
  overflow: hidden;
  white-space: nowrap;
  word-break: break-all;
  text-overflow: ellipsis;
}

/* 单元格 */
.ele-cell {
  display: flex;

  &:not(.ele-cell-align-top) {
    align-items: center;
  }

  &.ele-cell-align-bottom {
    align-items: flex-end;
  }

  & > .ele-cell-content {
    flex: 1;
    box-sizing: border-box;
  }

  & > * + .ele-cell-content {
    padding-left: @padding-sm;
  }

  .ele-cell-title {
    color: @heading-color;
    font-size: @font-size-base + 1px;
  }

  .ele-cell-desc {
    color: @text-color-secondary;
    font-size: @font-size-base - 1px;
    margin-top: (@padding-xs / 2);
  }
}

/* 页面容器 */
.ele-body {
  padding: @padding-md;

  &.ele-body-card {
    padding-bottom: 0;

    .ant-card {
      margin-bottom: @padding-md;
    }
  }
}

/* 底部工具栏 */
.ele-bottom-tool {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  display: flex;
  align-items: center;
  box-shadow: @shadow-1-up;
  padding: @padding-xs @padding-md;
  background: @component-background;
  transition: padding-left @sidebar-transition-anim;
  z-index: (@layout-z-index - 1);

  .ele-bottom-tool-actions {
    flex: 1;
    text-align: right;
  }
}

@media screen and (min-width: 768px) {
  .ele-admin-sidebar + .ele-admin-body .ele-bottom-tool {
    padding-left: (@sidebar-width + @padding-md);
  }

  .ele-layout-collapse .ele-admin-sidebar + .ele-admin-body .ele-bottom-tool {
    padding-left: (@sidebar-collapse-width + @padding-md);
  }
}

/* 静态表格 */
.ele-table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  background: @component-background;

  thead tr {
    th,
    td {
      background: @table-header-bg;
      transition: background-color 0.25s ease;
    }
  }

  tbody tr {
    th,
    td {
      background: @component-background;
      transition: background-color 0.25s ease;
    }
  }

  tbody tr:hover,
  &.ele-table-stripe tr:nth-child(even) {
    th,
    td {
      background: @table-row-hover-bg;
    }
  }

  tbody tr.ele-table-active {
    th,
    td {
      background: @table-selected-row-bg;
    }
  }

  th,
  td {
    font-weight: normal;
    line-height: 23px;
    padding: 12px 10px;
    border-width: 0;
    border-style: solid;
    border-color: @table-border-color;
    border-bottom-width: 1px;
    text-align: left;
  }

  th {
    color: @table-header-color;
  }

  // 显示边框
  &.ele-table-border {
    th,
    td {
      border-width: 1px;
    }
  }

  // 尺寸控制
  &.ele-table-medium {
    th,
    td {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }

  &.ele-table-small {
    th,
    td {
      padding-top: 8px;
      padding-bottom: 8px;
      font-size: 12px;
    }
  }

  &.ele-table-mini {
    th,
    td {
      padding-top: 6px;
      padding-bottom: 6px;
      font-size: 12px;
    }
  }

  // 表头分割线
  &:not(.ele-table-border) thead > tr > th {
    position: relative;

    &:not(:last-child):before {
      position: absolute;
      top: 50%;
      right: 0;
      width: 1px;
      height: 1.6em;
      background-color: @table-header-cell-split-color;
      transform: translateY(-50%);
      transition: background-color 0.3s;
      content: '';
    }
  }
}

/* antd 组件样式调整 */
body {
  // 分割线
  .ant-divider {
    margin: 0;
  }

  // modal 标题高度
  .ant-modal-header {
    padding: @modal-header-padding;

    & > .ant-modal-title > div {
      padding-right: calc(@modal-close-x-width - 20px);
    }
  }

  .ant-modal-close-x {
    width: @modal-close-x-width;
    height: @modal-close-x-height;
    line-height: @modal-close-x-height;
  }
}

// 按钮加图标减少间距
.ele-btn-icon:not(.ant-btn-sm) {
  padding-left: (@padding-sm - 2px);
  padding-right: (@padding-sm - 2px);

  & > .anticon + span {
    margin-left: @margin-xss;
    margin-right: 2px;
  }
}

// 表单详情
.ele-form-detail .ant-form-item {
  margin-bottom: 0;
}

@media (max-width: 575px) {
  .ele-form-detail .ant-form-item-label {
    line-height: @input-height-lg - 0.0001px;
    padding-bottom: 0;

    & > label:after {
      display: inherit;
    }
  }
}

// 级联选择器增加高度
.ele-pop-wrap-higher .ant-cascader-menu {
  height: 280px;
}

// message loading 带遮罩层
.ele-message-loading .ant-message,
.ele-message-loading-mask .ant-message {
  pointer-events: auto;
}

.ele-message-loading-mask .ant-message {
  background: @modal-mask-bg;
}

body .ant-message {
  top: 0;
  padding-top: 16px;
  min-height: 100vh;
  transition: background-color 0.3s;
}

// 虚拟滚动条样式优化
.rc-virtual-list-scrollbar-thumb,
.ant-select-tree-list-scrollbar-thumb {
  background: @scrollbar-thumb-color !important;

  &:hover {
    background: @scrollbar-thumb-hover-color !important;
  }
}

// table 有滚动条时加边框
.ant-table-bordered div.ant-table-body {
  &:before,
  &:after {
    content: '';
    position: absolute;
    background: @border-color-split;
    z-index: 2;
  }

  &:before {
    right: 0;
    top: 0;
    bottom: 0;
    width: 1px;
  }

  &:after {
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
  }
}

/* echarts 提示框圆点 */
.ele-chart-dot {
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border-radius: 50%;
  display: inline-block;
  background: #5b8ff9;
}

.echarts > div {
  max-width: 100%;
  overflow: hidden;
}

/* 滚动条 */
::-webkit-scrollbar {
  width: @scrollbar-thumb-size;
  height: @scrollbar-thumb-size;
}

::-webkit-scrollbar-thumb {
  border-radius: (@scrollbar-thumb-size / 2);
  border: @scrollbar-thumb-border-size solid transparent;
  background-color: @scrollbar-thumb-color;
  background-clip: padding-box;

  &:hover {
    background-color: @scrollbar-thumb-hover-color;
  }
}

::-webkit-scrollbar-track {
  background: @scrollbar-track-color;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

// 小型滚动条
.ele-scrollbar-mini {
  &::-webkit-scrollbar {
    width: @scrollbar-mini-thumb-size;
    height: @scrollbar-mini-thumb-size;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: (@scrollbar-mini-thumb-size / 2);
  }
}

// 隐藏滚动条
.ele-scrollbar-hide::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.ele-scrollbar-hide,
.ele-scrollbar-hover {
  overflow: auto;
  overflow: overlay;
}

// 鼠标滑入才显示滚动条
@media (hover: hover) and (pointer: fine) {
  .ele-scrollbar-hover {
    &::-webkit-scrollbar,
    &.ele-scrollbar-mini::-webkit-scrollbar {
      width: 0;
      height: 0;
    }

    &:hover {
      &::-webkit-scrollbar {
        width: @scrollbar-thumb-size;
        height: @scrollbar-thumb-size;
      }

      &.ele-scrollbar-mini::-webkit-scrollbar {
        width: @scrollbar-mini-thumb-size;
        height: @scrollbar-mini-thumb-size;
      }
    }
  }
}

// 小尺寸设备
@media only screen and (max-width: 768px) {
  ::-webkit-scrollbar,
  .ele-scrollbar-hover:hover::-webkit-scrollbar {
    width: @scrollbar-mini-thumb-size;
    height: @scrollbar-mini-thumb-size;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: (@scrollbar-mini-thumb-size / 2);
  }
}

// 兼容火狐浏览器
* {
  scrollbar-width: thin;
  scrollbar-color: @scrollbar-thumb-color transparent;
}