* {
  word-break: break-all;
  &::-webkit-scrollbar {
    width: var(--xxs);
  }
  &::-webkit-scrollbar-thumb {
    border-radius: var(--xxs);
    background: rgba(0,0,0,.2);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,.4);
  }
  ::-webkit-scrollbar-track {
    border-radius: var(--xxs);
  }
}

:root {
  --column-left-width: calc(var(--xxs) * 68);
  --two-column-gap: 12px;
  --nav-height: calc(var(--xxs) * 14);
  --affix-height: 56px;
  --affix-padding: calc(var(--affix-height) + var(--lg));
}

body, html {
  height: 100%;
  #app {
    height: 100%;
    .app-container {
      height: 100%;
      .hl-layout {
        height: 100%;
        .iframe-container {
          height: 100%!important;
        }
      }
    }
  }
}

.min-width-80 {
  min-width: calc(var(--xxs) * 20);
}

.hl-checkbox {
  .checkbox-inner {
    .icon-indeterminate {
      svg {
        height: calc(var(--xxs) * 1.5);
        width: calc(var(--xxs) * 1.5);
        background: #36A4FF;
        border-radius: calc(var(--xxs) * 0.25);
      }
    }
  }
}

.hl-tabs {
  --tabs-gap: calc(var(--xxs) * 8);
}

.hl-switch {
  --switch-border-color-checked: #4CC09E;
  --switch-bg-color-checked: #4CC09E;
  --switch-border-color: #BDBDBD;
  --switch-bg-color: #BDBDBD;
  &.is-disabled {
    input:disabled + em {
      border-color: #EDEDED;
      background-color: #EDEDED;
    }
    input:checked + em {
      border-color: rgba(76,192,158,0.05);
      background-color: rgba(76,192,158,0.65);
    }
  }
}

.hb-overflow-list {
  .hl-button {
    position: relative;
    padding-left: 0;
    padding-right: var(--md);
    &:not(:last-of-type):after {
      position: absolute;
      content: '';
      width: calc(var(--xxs) * 0.25);
      height: calc(var(--xxs) * 3.5);
      background-color: #EDEDED;
      right: calc(var(--xxs) * 1.75);
    }
    &:last-of-type {
      padding-right: var(--xs);
    }
  }

  .hl-dropdown {
    margin-left: 0!important;
  }
}

.hl-date-picker {
  .picker-footer {
    .hl-button.primary {
      background: var(--main-button-bg-color);
      color: #fff;
      border: calc(var(--xxs) * 0.25) solid var(--main-button-border-color);
      &:hover {
        background: var(--main-button-bg-color-hover);
      }
    }
  }
}

.hl-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
  & > .hl-panel {
    --panel-padding: var(--xxl);
    & > .panel-header {
      border-bottom: none;
      .panel-header-right .panel-close {
        transform: translateX(10%);
      }
    }
    & > .panel-body {
      padding: var(--xxs) var(--xxl);
    }
    & > .panel-footer {
      border-top: none;
      padding-top: calc(var(--xxs) * 8);
      .hl-button.primary {
        background: var(--main-button-bg-color);
        color: #fff;
        border: calc(var(--xxs) * 0.25) solid var(--main-button-border-color);
        &:hover {
          background: var(--main-button-bg-color-hover);
        }
      }
      .hl-button{
        min-width: calc(var(--xxs) * 20);
      }

    }
    //高度大于600时使用此类名
    &.dlg-larger-600 {
      & > .panel-body {
        overflow-y: scroll;
      }
      .panel-footer {
        box-shadow: 0px -2px 7px 0px rgba(0, 0, 0, 0.06);
        margin-top: var(--md);
        border-top: calc(var(--xxs) * 0.25) solid #ededed;
      }
    }
  }
}

.hl-message-box {
  & > .hl-panel {
    --panel-padding: var(--xxl);
    & > .panel-header {
      border-bottom: none;
      .panel-title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        line-height: 22px;
      }
      .panel-header-right .panel-close {
        transform: translateX(10%);
      }
    }
    & > .panel-body {
      text-align: left;
    }
    & > .panel-footer {
      border-top: none;
      justify-content: flex-end!important;
      .hl-button.danger, .hl-button.primary {
        background: var(--main-button-bg-color);
        color: #fff;
        border: calc(var(--xxs) * 0.25) solid var(--main-button-border-color);
        &:hover {
          background: var(--main-button-bg-color-hover);
        }
      }
    }
  }
}

.hl-overlay {
  background-color: rgba(0,0,0,0);
}
.tree-node-content .tree-node-arrow.expanded{
  color: #4B4B4B !important;
}
.tree-node-content .tree-node-arrow:not(.custom-icon){
  color:#BDBDBD;
}
.tree-node-content .tree-node-arrow.is-leaf{
  color: transparent;
}

.hl-simple-table {
  .first-column-index {
    padding-left: var(--xs)!important;
  }
}
.hb-modeless-dialog {
  box-shadow: 0 4px 24px 0 rgba(41,48,64,0.12), 0 16px 32px 0 rgba(41,48,64,0.06);
}
.hl-dialog {
  .panel-body {
    >.hl-form:has(.hl-form-item.is-required) {
      padding-left: calc(var(--xxs) * 2.5);
    }
  }
}
.hl-input.search-input {
  .input-affixe.suffix {
    .hl-icon {
      margin-right: calc(-1 * var(--input-padding-x));
      width: 31px;
      height: 30px;
      background: #F9FAFE;
      border-radius: 0px 2px 2px 0px;
      border-left: 1px solid #E7E7E7;
      svg {
        width: 14px;
        height: 14px;
      }
    }
  }
}
.affix-bottom-alone {
  position: fixed;
  bottom: var(--root-layout-out-padding, var(--layout-out-padding));
  width: calc(100vw - 2 * var(--root-layout-out-padding, var(--layout-out-padding)) - var(--layout-aside-width));
  display: flex;
  column-gap: var(--md);
  align-items: center;
  background-color: white;
  z-index: 99;
  height: var(--affix-height);
  padding: 12px 20px;
  box-shadow: 0 6px 24px rgba(var(--shadow-color, 62, 78, 106), 0.1) !important;
}
.sub-page-title {
  position: relative;
  padding-left: 12px;
  color: #4B4B4B;
  font-weight: 500px;
  font-size: 14px;
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 4px;
    height: 14px;
    background: #36A4FF;
  }
}
.tree-add {
  height: 40px;
  padding-left: 8px;
  padding-right: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #EDEDED;
  cursor: pointer;
  .label {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #4B4B4B;
    line-height: 20px;
  }
  .hl-icon {
    width: 14px;
    height: 14px;
    svg {
      --fill-opacity: 0 !important;
      color: #BDBDBD;
    }
  }
}