// 测试
@use './element.scss';

:root {
  --hy-el-fill-color-light: rgba(var(--hy-background-2), 1);
  --hy-el-fill-color-lighter: rgba(var(--hy-background-4), 1);
  --hy-el-fill-color-blank: rgba(var(--hy-background-2), 1);
  --hy-el-color-info: rgba(var(--hy-info), 1);
  --hy-el-border: var(--hy-el-border-width) var(--hy-el-border-style) rgba(var(--hy-border), 1);
  --hy-el-disabled-border-color: rgba(var(--hy-border), 1);
  --hy-el-bg-color: rgba(var(--hy-background), 1);
  --hy-el-text-color-secondary: rgba(var(--hy-auxiliary), 1);
  --hy-el-text-color-regular: rgba(var(--hy-auxiliary), 1);
  --hy-el-border-color-light: rgba(var(--hy-border), 1);
  --hy-el-border-color-lighter: rgba(var(--hy-border), 1);
  --hy-el-color-primary: rgba(var(--hy-theme), 1);
  --hy-el-text-color-placeholder: rgba(var(--hy-info), 1);
  --hy-el-text-color-primary: rgba(var(--hy-auxiliary), 1);
  --hy-el-color-danger: rgba(var(--hy-danger), 1);
}

// 表格
.hy-el-table {
  --hy-el-table-border-color: rgba(var(--hy-border), 1);
  --hy-el-table-border: 1px solid rgba(var(--hy-border), 0.5);
  --hy-el-table-text-color: rgba(var(--hy-main), 1);
  --hy-el-table-header-text-color: rgba(var(--hy-main), 1);
  --hy-el-table-row-hover-bg-color: rgba(var(--hy-background-2-50), 1);
  --hy-el-table-current-row-bg-color: rgba(var(--hy-background-2-50), 1);
  --hy-el-table-header-bg-color: rgba(var(--hy-background-2), 1);
  --hy-el-table-fixed-box-shadow: var(--hy-el-box-shadow-light);
  --hy-el-table-bg-color: rgba(var(--hy-background), 1);
  --hy-el-table-tr-bg-color: rgba(var(--hy-background), 1);
  --hy-el-table-expanded-cell-bg-color: rgba(var(--hy-background), 1);
  --hy-el-table-fixed-left-column: inset 10px 0 10px -10px rgba(var(--hy-background-3), 1);
  --hy-el-table-fixed-right-column: inset -10px 0 10px -10px rgba(var(--hy-background-3), 1);
  --hy-el-table-index: var(--hy-el-index-normal);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  height: -moz-fit-content;
  height: fit-content;
  width: 100%;
  max-width: 100%;
  background-color: var(--hy-el-table-bg-color);
  font-size: var(--hy-el-font-size-base);
  color: var(--hy-el-table-text-color);
}

.hy-el-table__expand-icon {
  color: rgba(var(--hy-main), 1);
  font-size: 12px;
  line-height: 12px;
  font-weight: 700;
  width: min(23px, 100%);
  height: 23px;
}

.hy-el-table__expand-icon>.hy-el-icon {
  font-size: 12px;
}

.hy-el-table tr:hover td:first-child {
  box-shadow: inset 10px 0 10px -10px rgba(var(--hy-theme), 0.2), inset 0 10px 10px -10px rgba(var(--hy-theme), 0.2), inset 0 -10px 10px -10px rgba(var(--hy-theme), 0.2);
}

.hy-el-table tr:hover td:last-child {
  box-shadow: inset -10px 0 10px -10px rgba(var(--hy-theme), 0.2), inset 0 10px 10px -10px rgba(var(--hy-theme), 0.2), inset 0 -10px 10px -10px rgba(var(--hy-theme), 0.2);
}

.hy-el-table tr:hover td:not(:first-child):not(:last-child) {
  box-shadow: inset 0 10px 10px -10px rgba(var(--hy-theme), 0.2), inset 0 -10px 10px -10px rgba(var(--hy-theme), 0.2);
}

.hy-el-scrollbar__view {
  height: 100%;
}

// 虚拟表格
.hy-el-table-v2 {
  --hy-el-table-border-color: rgba(var(--hy-border), 1);
  --hy-el-table-border: 1px solid rgba(var(--hy-border), 0.5);
  --hy-el-table-text-color: rgba(var(--hy-main), 1);
  --hy-el-table-header-text-color: rgba(var(--hy-main), 1);
  --hy-el-table-row-hover-bg-color: rgba(var(--hy-background-2-50), 1);
  --hy-el-table-current-row-bg-color: rgba(var(--hy-background-2-50), 1);
  --hy-el-table-header-bg-color: rgba(var(--hy-background-2), 1);
  --hy-el-table-fixed-box-shadow: var(--hy-el-box-shadow-light);
  --hy-el-table-bg-color: rgba(var(--hy-background), 1);
  --hy-el-table-tr-bg-color: rgba(var(--hy-background), 1);
  --hy-el-table-expanded-cell-bg-color: rgba(var(--hy-background), 1);
  --hy-el-table-fixed-left-column: inset 10px 0 10px -10px rgba(var(--hy-background-3), 1);
  --hy-el-table-fixed-right-column: inset -10px 0 10px -10px rgba(var(--hy-background-3), 1);
  --hy-el-table-index: var(--hy-el-index-normal);
  font-size: var(--hy-el-font-size-base);
}

.hy-el-table-v2__table .hy-el-table-v2__row:hover .hy-el-table-v2__row-cell:first-child {
  box-shadow: inset 10px 0 10px -10px rgba(var(--hy-theme), 0.2), inset 0 10px 10px -10px rgba(var(--hy-theme), 0.2), inset 0 -10px 10px -10px rgba(var(--hy-theme), 0.2);
}

.hy-el-table-v2__table .hy-el-table-v2__row:hover .hy-el-table-v2__row-cell:last-child {
  box-shadow: inset -10px 0 10px -10px rgba(var(--hy-theme), 0.2), inset 0 10px 10px -10px rgba(var(--hy-theme), 0.2), inset 0 -10px 10px -10px rgba(var(--hy-theme), 0.2);
}

.hy-el-table-v2__table .hy-el-table-v2__row:hover .hy-el-table-v2__row-cell:not(:first-child):not(:last-child) {
  box-shadow: inset 0 10px 10px -10px rgba(var(--hy-theme), 0.2), inset 0 -10px 10px -10px rgba(var(--hy-theme), 0.2);
}

.hy-el-table-v2__right {
  display: flex;
  flex-direction: column-reverse;
  position: absolute;
  overflow: hidden;
  top: 0;
  background-color: var(--hy-el-bg-color);
  right: 0;
  box-shadow: -2px 0 4px 0 rgba(var(--hy-background-3), 1);
}

.hy-el-table-v2__left {
  display: flex;
  flex-direction: column-reverse;
  position: absolute;
  overflow: hidden;
  top: 0;
  background-color: var(--hy-el-bg-color);
  left: 0;
  box-shadow: 2px 0 4px 0 rgba(var(--hy-background-3), 1);
}

.hy-el-empty__image svg {
  color: rgba(var(--hy-auxiliary), 1);
  fill: currentColor;
  width: 100%;
  height: 100%;
  vertical-align: top;
}

// input输入框
.hy-el-input {
  --hy-el-input-text-color: rgba(var(--hy-main), 1);
  --hy-el-input-border: rgba(var(--hy-border), 1);
  --hy-el-input-hover-border: rgba(var(--hy-theme), 1);
  --hy-el-input-focus-border: rgba(var(--hy-theme), 1);
  --hy-el-input-transparent-border: 0 0 0 1px transparent inset;
  --hy-el-input-border-color: rgba(var(--hy-border), 1);
  --hy-el-input-border-radius: var(--hy-el-border-radius-base);
  --hy-el-input-bg-color: rgba(var(--hy-background-2), 1);
  --hy-el-input-icon-color: var(--hy-el-text-color-placeholder);
  --hy-el-input-placeholder-color: rgba(var(--hy-auxiliary), 1);
  --hy-el-input-hover-border-color: rgba(var(--hy-theme), 1);
  --hy-el-input-clear-hover-color: var(--hy-el-text-color-secondary);
  --hy-el-input-focus-border-color: rgba(var(--hy-theme), 1);
  --hy-el-input-width: 100%;
  --hy-el-input-height: var(--hy-el-component-size);
  position: relative;
  font-size: var(--hy-el-font-size-base);
  display: inline-flex;
  width: var(--hy-el-input-width);
  line-height: var(--hy-el-input-height);
  box-sizing: border-box;
  vertical-align: middle;
}

.hy-el-input-group__prepend {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.hy-el-input-group__append {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.hy-el-input.is-disabled .hy-el-input__wrapper {
  background-color: rgba(var(--hy-background-2), 1);
  // background-color: var(--hy-el-input-bg-color);
  cursor: not-allowed;
  box-shadow: 0 0 0 1px rgba(var(--hy-border), 1) inset;
}

.hy-el-textarea {
  --hy-el-input-text-color: rgba(var(--hy-main), 1);
  --hy-el-input-border: rgba(var(--hy-border), 1);
  --hy-el-input-hover-border: rgba(var(--hy-theme), 1);
  --hy-el-input-focus-border: rgba(var(--hy-theme), 1);
  --hy-el-input-transparent-border: 0 0 0 1px transparent inset;
  --hy-el-input-border-color: rgba(var(--hy-border), 1);
  --hy-el-input-border-radius: var(--hy-el-border-radius-base);
  --hy-el-input-bg-color: rgba(var(--hy-background-2), 1);
  --hy-el-input-icon-color: var(--hy-el-text-color-placeholder);
  --hy-el-input-placeholder-color: rgba(var(--hy-auxiliary), 1);
  --hy-el-input-hover-border-color: rgba(var(--hy-theme), 1);
  --hy-el-input-clear-hover-color: var(--hy-el-text-color-secondary);
  --hy-el-input-focus-border-color: rgba(var(--hy-theme), 1);
  --hy-el-input-width: 100%;
  position: relative;
  display: inline-block;
  width: 100%;
  vertical-align: bottom;
  font-size: var(--hy-el-font-size-base);
}

.hy-el-input-group__append,
.hy-el-input-group__prepend {
  background-color: var(--hy-el-fill-color-light);
  color: rgba(var(--hy-auxiliary), 1);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  border-radius: var(--hy-el-input-border-radius);
  padding: 0 20px;
  white-space: nowrap;
}

.hy-el-textarea__clear {
  position: absolute;
  right: 11px;
  top: 15px;
  transform: translateY(-50%);
  color: var(--el-input-icon-color);
  font-size: 14px;
  cursor: pointer;
}

// 日期选择器
.hy-el-popper.hy-el-tooltip.hy-el-picker__popper {
  --hy-el-border-color-light: rgba(var(--hy-auxiliary), 1);
}

.hy-el-popper {
  --hy-el-popper-border-radius: var(--hy-el-popover-border-radius, 4px);
  --hy-el-popper-bg-color-light: rgba(var(--hy-background-2), 1);
  --hy-el-popper-bg-color-dark: rgba(var(--hy-background-2), 1);
  position: absolute;
  border-radius: var(--hy-el-popper-border-radius);
  padding: 5px 11px;
  z-index: 2000;
  font-size: 12px;
  line-height: 20px;
  min-width: 10px;
  overflow-wrap: break-word;
  word-break: normal;
  visibility: visible;
}

.hy-el-date-picker {
  --hy-el-datepicker-text-color: rgba(var(--hy-auxiliary), 1);
  --hy-el-datepicker-off-text-color: rgba(var(--hy-info), 1);
  --hy-el-datepicker-header-text-color: rgba(var(--hy-auxiliary), 1);
  --hy-el-datepicker-icon-color: rgba(var(--hy-auxiliary), 1);
  --hy-el-datepicker-border-color: var(--hy-el-disabled-border-color);
  --hy-el-datepicker-inner-border-color: var(--hy-el-border-color-light);
  --hy-el-datepicker-inrange-bg-color: rgba(var(--hy-background-2), 1);
  --hy-el-datepicker-inrange-hover-bg-color: rgba(var(--hy-background-3), 1);
  --hy-el-datepicker-active-color: rgba(var(--hy-background-3), 1);
  --hy-el-datepicker-hover-text-color: rgba(var(--hy-theme), 1);
  --hy-el-datepicker-bg-color: rgba(var(--hy-background-2), 1);
  --hy-el-fill-color-blank: rgba(var(--hy-background-2), 1);
}

.hy-el-date-table td.selected .hy-el-date-table-cell__text {
  background-color: var(--hy-el-datepicker-active-color);
  color: rgba(var(--hy-theme), 1);
}

.hy-el-button.is-plain {
  --hy-el-button-hover-text-color: rgba(var(--hy-theme), 1);
  --hy-el-button-hover-bg-color: rgba(var(--hy-background-2), 1);
  --hy-el-button-hover-border-color: rgba(var(--hy-theme), 1);
}

.hy-el-button {
  --hy-el-button-font-weight: var(--hy-el-font-weight-primary);
  --hy-el-button-border-color: rgba(var(--hy-border), 1);
  --hy-el-button-bg-color: var(--hy-el-fill-color-blank);
  --hy-el-button-text-color: var(--hy-el-text-color-regular);
  --hy-el-button-disabled-text-color: var(--hy-el-disabled-text-color);
  --hy-el-button-disabled-bg-color: var(--hy-el-fill-color-blank);
  --hy-el-button-disabled-border-color: var(--hy-el-border-color-light);
  --hy-el-button-divide-border-color: rgba(255, 255, 255, 0.5);
  --hy-el-button-hover-text-color: var(--hy-el-color-primary);
  --hy-el-button-hover-bg-color: var(--hy-el-color-primary-light-9);
  --hy-el-button-hover-border-color: var(--hy-el-color-primary-light-7);
  --hy-el-button-active-text-color: var(--hy-el-button-hover-text-color);
  --hy-el-button-active-border-color: var(--hy-el-color-primary);
  --hy-el-button-active-bg-color: var(--hy-el-button-hover-bg-color);
  --hy-el-button-outline-color: var(--hy-el-color-primary-light-5);
  --hy-el-button-hover-link-text-color: var(--hy-el-text-color-secondary);
  --hy-el-button-active-color: var(--hy-el-text-color-primary);
}

.hy-el-date-table.is-week-mode .hy-el-date-table__row.current .hy-el-date-table-cell {
  background-color: rgba(var(--hy-background-3), 1);
}

.hy-el-date-table td.start-date .hy-el-date-table-cell__text,
.hy-el-date-table td.end-date .hy-el-date-table-cell__text {
  background-color: rgba(var(--hy-background-2), 1);
}

.hy-el-date-table td.start-date .hy-el-date-table-cell,
.hy-el-date-table td.end-date .hy-el-date-table-cell {
  color: rgba(var(--hy-theme), 1);
}

.hy-el-year-table td.current:not(.disabled) .hy-el-date-table-cell__text {
  color: rgba(var(--hy-theme), 1);
  background-color: var(--hy-el-datepicker-active-color);
}

.hy-el-month-table td.current:not(.disabled) .hy-el-date-table-cell__text {
  color: rgba(var(--hy-theme), 1);
  background-color: var(--hy-el-datepicker-active-color);
}

.hy-el-date-table td.current:not(.disabled) .hy-el-date-table-cell__text {
  color: rgba(var(--hy-theme), 1);
  background-color: var(--hy-el-datepicker-active-color);
}

.hy-el-date-range-picker {
  --hy-el-datepicker-text-color: rgba(var(--hy-auxiliary), 1);
  --hy-el-datepicker-off-text-color: rgba(var(--hy-info), 1);
  --hy-el-datepicker-header-text-color: rgba(var(--hy-auxiliary), 1);
  --hy-el-datepicker-icon-color: rgba(var(--hy-auxiliary), 1);
  --hy-el-datepicker-border-color: rgba(var(--hy-border), 1);
  --hy-el-datepicker-inner-border-color: rgba(var(--hy-border), 1);
  --hy-el-datepicker-inrange-bg-color: rgba(var(--hy-background-2), 1);
  --hy-el-datepicker-inrange-hover-bg-color: rgba(var(--hy-background-3), 1);
  --hy-el-datepicker-active-color: rgba(var(--hy-background-3), 1);
  --hy-el-datepicker-hover-text-color: rgba(var(--hy-theme), 1);
  --hy-el-datepicker-bg-color: rgba(var(--hy-background-2), 1);
}

.hy-el-date-table td.in-range .hy-el-date-table-cell {
  background-color: rgba(var(--hy-background-3), 1);
}

.hy-el-date-editor.hy-el-input__wrapper {
  box-shadow: 0 0 0 1px rgba(var(--hy-border), 1) inset;
}

.hy-el-date-editor {
  --hy-el-input-icon-color: rgba(var(--hy-auxiliary), 1);
  --hy-el-input-placeholder-color: rgba(var(--hy-auxiliary), 1);
  --hy-el-input-hover-border: rgba(var(--hy-theme), 1);
  --hy-el-input-hover-border-color: rgba(var(--hy-theme), 1);
  --hy-el-text-color-placeholder: rgba(var(--hy-auxiliary), 1);
  --hy-el-text-color-regular: rgba(var(--hy-main), 1);
}

.hy-el-date-editor .hy-el-range__icon {
  color: rgba(var(--hy-auxiliary), 1);
}

.hy-el-date-picker__editor-wrap .hy-el-input__wrapper {
  background-color: rgba(var(--hy-background-2), 1);
}

.hy-el-scrollbar__wrap .hy-el-time-spinner__list .hy-el-time-spinner__item:hover {
  background-color: rgba(var(--hy-background-3), 1);
}

.hy-el-button.is-text:not(.is-disabled):hover {
  background-color: rgba(var(--hy-background-3), 1);
}

// 单选框
.hy-el-radio__inner {
  background-color: rgba(var(--hy-background), 1);
}

.hy-el-radio__input.is-checked .hy-el-radio__inner::after {
  background-color: rgba(var(--hy-theme), 1);
}

.hy-el-radio__input.is-checked .hy-el-radio__inner {
  border-color: var(--hy-el-color-primary);
  background: rgba(var(--hy-background), 1);
}

// 多选框
.hy-el-checkbox__inner {
  background-color: rgba(var(--hy-background), 1)
}

.hy-el-checkbox__input.is-checked .hy-el-checkbox__inner,
.hy-el-checkbox__input.is-indeterminate .hy-el-checkbox__inner {
  background: rgba(var(--hy-theme), .5);
  box-shadow: 0 0 4px 0 rgba(var(--hy-theme), 1);
  border-color: rgba(var(--hy-theme), 1);
}

.hy-el-checkbox__input.is-disabled .hy-el-checkbox__inner {
  background-color: rgba(var(--hy-background), 1);
  border-color: rgba(var(--hy-info), 1);
  cursor: not-allowed;
}

.hy-el-checkbox__input.is-disabled.is-checked .hy-el-checkbox__inner {
  background-color: rgba(var(--hy-background), 1);
  border-color: rgba(var(--hy-info), 1);
  box-shadow: 0 0 4px 0 rgba(var(--hy-info), 1);
}

.hy-el-checkbox__input.is-disabled.is-checked .hy-el-checkbox__inner::after {
  border-color: rgba(var(--hy-info), 1);
}

.hy-el-checkbox-button.is-checked .hy-el-checkbox-button__inner {
  color: var(--hy-el-checkbox-button-checked-text-color);
  // background: linear-gradient(180deg, rgba(var(--hy-auxiliary), .5), rgba(var(--hy-auxiliary), .8) 53%, rgba(var(--hy-theme), .9));
  background: rgba(var(--hy-theme), .5);
  // border: 1px solid rgba(var(--hy-theme), 1);
  box-shadow: inset 0px 0px 0px 1px rgba(var(--hy-theme), 1) !important;
  position: relative;
  z-index: 99;
  // &::after {
  //   content: '';
  //   position: absolute;
  //   bottom: 0px;
  //   left: 0px;
  //   width: 100%;
  //   height: 2px;
  //   background: linear-gradient( 90deg, rgba(var(--hy-theme), 0) 0%, rgba(var(--hy-theme), 1) 49.31%, rgba(var(--hy-theme), 0) 100%);
  // }
}

// 选择框
.hy-el-popper.hy-el-tooltip.hy-el-select__popper {
  --hy-el-border-color-light: rgba(var(--hy-border), 1);
}

.hy-el-select__wrapper {
  box-shadow: 0 0 0 1px rgba(var(--hy-border), 1) inset;
}

.hy-el-select__wrapper.is-hovering:not(.is-focused) {
  box-shadow: 0 0 0 1px rgba(var(--hy-theme), 1) inset;
}

.hy-el-select__placeholder.is-transparent {
  color: rgba(var(--hy-auxiliary), 1);
}

.hy-el-select__placeholder {
  color: rgba(var(--hy-main), 1);
}

.hy-el-select__caret {
  color: rgba(var(--hy-main), 1);
}

.hy-el-select-dropdown__item.is-selected {
  background-color: rgba(var(--hy-background-2), 1);
}

.hy-el-select-dropdown__item.is-hovering:hover {
  background-color: rgba(var(--hy-background-3), 1);
  color: rgba(var(--hy-theme), 1);
}

.hy-el-select__wrapper.is-disabled {
  box-shadow: 0 0 0 1px rgba(var(--hy-info), 1) inset !important;
}

.hy-el-tag.hy-el-tag--info {
  --hy-el-tag-bg-color: rgba(var(--hy-background-2), 1);
  --hy-el-tag-border-color: rgba(var(--hy-border), 1);
  --hy-el-tag-hover-color: var(--hy-el-color-info);
}

.hy-el-select__selection .hy-el-tag {
  border-color: rgba(var(--hy-border), 1);
}

.hy-el-tag.hy-el-tag--info {
  --hy-el-tag-text-color: rgba(var(--hy-main), 1);
}

.hy-el-tag .hy-el-tag__close {
  background-color: rgba(var(--hy-danger-2), 1) !important;
}

// 消息提示框
.hy-el-popper,
.hy-el-tooltip {
  --hy-el-border-color-light: rgba(var(--hy-theme), 1);
}

.hy-el-popper.is-dark {
  --hy-el-border-color-light: rgba(var(--hy-theme), 1);
  --hy-el-text-color-primary: rgba(var(--hy-theme), 1);
  color: rgba(var(--hy-main), 1);
  background: var(--hy-el-popper-bg-color-dark);
  border: 1px solid var(--hy-el-text-color-primary);
}

.hy-el-popover.hy-el-popper {
  color: rgba(var(--hy-main), 1);
  padding: 0px;
}

// 分页器
.hy-el-pagination.is-background .btn-prev {
  border-radius: 50%;
  background: rgba(var(--hy-background-2), 1);
  color: rgba(var(--hy-main), 1);

  &:hover {
    color: rgba(var(--hy-theme), 1);
  }
}

.hy-el-pagination.is-background .btn-prev:disabled {
  border-radius: 50%;

  &:hover {
    color: rgba(var(--hy-main), 1);
  }
}

.hy-el-pagination.is-background .btn-next,
.hy-el-pagination.is-background .hy-el-pager li {
  border-radius: 50%;
  background: rgba(var(--hy-background-2), 1);
  color: rgba(var(--hy-main), 1);

  &:hover {
    color: rgba(var(--hy-theme), 1);
  }
}

.hy-el-pagination.is-background .hy-el-pager li {
  border-radius: 50%;
  background: rgba(var(--hy-background-2), 1);
  color: rgba(var(--hy-main), 1);

  &:hover {
    color: rgba(var(--hy-theme), 1);
  }
}

.hy-el-pagination.is-background .btn-prev.is-active,
.hy-el-pagination.is-background .btn-next.is-active,
.hy-el-pagination.is-background .hy-el-pager li.is-active {
  background: rgba(var(--hy-theme), .5);
  box-shadow: 0 0 6px 0 rgba(var(--hy-theme), 1);
  border: 1px solid rgba(var(--hy-theme), 1);
  color: rgba(var(--hy-main), 1);

}

.hy-el-pagination__total {
  color: rgba(var(--hy-main), 1);
}

.hy-el-pagination__jump {
  color: rgba(var(--hy-main), 1);
}

.hy-el-pagination.is-background .btn-prev:disabled,
.hy-el-pagination.is-background .btn-prev.is-disabled,
.hy-el-pagination.is-background .btn-next:disabled,
.hy-el-pagination.is-background .btn-next.is-disabled,
.hy-el-pagination.is-background .hy-el-pager li:disabled,
.hy-el-pagination.is-background .hy-el-pager li.is-disabled {
  &:hover {
    color: var(--hy-el-text-color-placeholder);
  }
}

// 下拉框
.hy-el-dropdown__popper.hy-el-popper {
  --hy-el-border-color-light: rgba(var(--hy-border), 1);
}

.hy-el-dropdown-menu {
  background-color: rgba(var(--hy-background-2), 1);

  .hy-el-dropdown-menu__item {
    &:hover {
      background-color: rgba(var(--hy-background-3), 1);
    }
  }
}

.hy-el-dropdown-menu__item:not(.is-disabled):focus,
.hy-el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: rgba(var(--hy-background-3), 1);
}

.hy-el-dialog {
  --hy-el-dialog-bg-color: var(--hy-el-bg-color);
  --hy-el-dialog-box-shadow: 0 0 12px 0 rgba(var(--hy-theme), 1);
  box-shadow: 0 0 12px 0 transparent;
  background-color: rgba(var(--hy-background), .7);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(var(--hy-theme), 1);
  padding: 0px;

  &::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    width: 24px;
    height: 24px;
    border-left: 1px solid;
    border-top: 1px solid;
    border-top-left-radius: 4px;
    border-image: radial-gradient(circle at 16.27% 15.07%, rgba(var(--hy-theme), 1) 0%, rgba(56, 189, 227, 0) 100%) 1;
    pointer-events: none;
  }

  &::after {
    content: '';
    position: absolute;
    right: 2px;
    top: 2px;
    width: 24px;
    height: 24px;
    border-right: 1px solid;
    border-top: 1px solid;
    border-top-right-radius: 4px;
    border-image: radial-gradient(circle at 83.73% 15.07%, rgba(var(--hy-theme), 1) 0%, rgba(56, 189, 227, 0) 100%) 1;
    pointer-events: none;
  }
}

.hy-el-dialog__body {
  position: relative;
  color: rgba(var(--hy-main), 1);

  &::before {
    content: '';
    position: absolute;
    left: 2px;
    bottom: 2px;
    width: 24px;
    height: 24px;
    border-left: 1px solid;
    border-bottom: 1px solid;
    border-bottom-left-radius: 4px;
    border-image: radial-gradient(circle at 16.27% 84.93%, rgba(var(--hy-theme), 1) 0%, rgba(56, 189, 227, 0) 100%) 1;
    pointer-events: none;
  }

  &::after {
    content: '';
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 24px;
    height: 24px;
    border-right: 1px solid;
    border-bottom: 1px solid;
    border-bottom-right-radius: 4px;
    border-image: radial-gradient(circle at 83.73% 84.93%, rgba(var(--hy-theme), 1) 0%, rgba(56, 189, 227, 0) 100%) 1;
    pointer-events: none;
  }
}

.hy-el-dialog__header {
  padding: 0px !important;
  position: relative;

  &::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 2px;
    transform: translateX(-50%);
    width: 36px;
    height: 1px;
    background: linear-gradient(90deg, rgba(45, 242, 255, 0) 0%, rgba(var(--hy-theme), 1) 10%, rgba(var(--hy-theme), 1) 90%, rgba(45, 242, 255, 0) 100%);
    pointer-events: none;
  }
}

.hy-el-dialog__title {
  color: rgba(var(--hy-main), 1);
}

.hy-el-dialog__headerbtn .hy-el-dialog__close {
  color: rgba(var(--hy-main), 1);
}

.hy-el-drawer__header {
  color: rgba(var(--hy-main), 1);
}

//  .hy-el-drawer {
//   --hy-el-drawer-bg-color: rgba(var(--hy-background-4), 1);
//  }
// 选项卡
.hy-el-tabs {
  border-radius: 6px 6px 0 0;
  overflow: hidden;
}

.hy-el-tabs__nav-scroll {
  background-color: rgba(var(--hy-background-2), 1);
}

.hy-el-tabs__nav-wrap::after {
  background-color: transparent;
  // background-color: rgba(var(--hy-background), 1);
}

.hy-el-tabs__active-bar {
  background: transparent;
}

.hy-el-tabs .hy-el-tabs__item {
  border-radius: 6px 6px 0 0;
  // border: 1px solid rgba(var(--hy-background-2), 1);
  padding: 0 20px !important;

  &:hover {
    border-color: rgba(var(--hy-theme), .5);
    box-shadow: inset 0 0 6px 0 rgba(var(--hy-theme), .5);
  }
}

.hy-el-tabs__header {
  margin: 0;
}

.hy-el-tabs__header .hy-el-tabs__item {
  color: rgba(var(--hy-auxiliary), 1);
  font-size: 14px;

  &:hover {
    color: rgba(var(--hy-main), 1);
  }
}

.hy-el-tabs__content {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
  border: 1px solid rgba(var(--hy-background-2), 1);
}

.hy-el-tabs__item.is-active {
  color: rgba(var(--hy-main), 1);
  background-color: rgba(var(--hy-background-3), 1);
  font-weight: 700;
  position: relative;

  &::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0px;
    border-radius: 999px;
    background: linear-gradient(90deg,
        rgba(45, 242, 255, 0) 0%,
        rgba(var(--hy-theme), 1) 50%,
        rgba(45, 242, 255, 0) 100%);
    pointer-events: none;
  }
}

.childrenTabs {
  .hy-el-tabs {
    border-radius: 6px 6px 0 0;
    overflow: hidden;

    .hy-el-tabs__nav-next,
    .hy-el-tabs__nav-prev {
      i::before {
        top: 2px !important;
      }
    }

    .hy-el-tabs__header {
      margin: 0;

      .hy-el-tabs__active-bar {
        transform: translateX(0px);
        height: 2px;
        border-bottom: 3px solid;
        border-image: linear-gradient(50deg,
            rgba(0, 216, 247, 0) 0%,
            rgba(var(--hy-theme), 1) 50%,
            rgba(0, 216, 247, 0)) 2 2 2 2;
        background: transparent;
      }
    }

    .hy-el-tabs__content {
      border-radius: 0 0 8px 8px;
      overflow: hidden;
      border: 0px solid rgba(var(--hy-border), 1);
    }

    .hy-el-tabs__item {
      border-radius: 6px 6px 0px 0px;
      border: 0px solid transparent;
      padding: 0 20px !important;
    }

    .hy-el-tabs__item:hover {
      color: #fff;
      box-shadow: transparent 0px 1px 3px 0px inset;
      border-bottom: 3px solid;
      border-image: linear-gradient(50deg,
          rgba(0, 216, 247, 0) 0%,
          rgba(var(--hy-theme), 1) 40%,
          rgba(0, 216, 247, 0) 80%) 2 2 2 2;
    }

    .is-active {
      color: #fff !important;
      background: transparent;
      box-shadow: transparent 0px 1px 3px 0px inset;
      border-bottom: 3px solid;
      border-image: linear-gradient(50deg,
          rgba(0, 216, 247, 0) 0%,
          rgba(var(--hy-theme), 1) 40%,
          rgba(0, 216, 247, 0) 80%) 2 2 2 2;

      &::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 0px;
        bottom: 0;
        left: 0px;
      }
    }

    .hy-el-tabs__nav-wrap.is-scrollable,
    .hy-el-tabs__nav-scroll {
      background: transparent;
    }
  }
}

// 级联选择器
.hy-el-cascader__dropdown {
  --hy-el-border-color-light: rgba(var(--hy-border), 1);
}

.hy-el-cascader-panel {
  --hy-el-cascader-menu-border: 1px solid rgba(var(--hy-border), 1);
}

// 表单
.hy-el-form-item--label-top .hy-el-form-item__label {
  width: 100%;
  color: rgba(var(--hy-main), 1);
}

.hy-el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.hy-el-form-item__label-wrap>.hy-el-form-item__label:before {
  color: transparent;
  margin-right: 0px;
  display: none;
}

.hy-el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.hy-el-form-item__label:before {
  color: transparent;
  margin-right: 0px;
  display: none;
}

.hy-el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.hy-el-form-item__label .form-label {
  font-size: 14px;
  color: rgba(var(--hy-main), 1);

  &::after {
    content: '*';
    color: rgba(var(--hy-danger), 1);
    margin-left: 4px;
  }
}


// 开关
.hy-el-switch {
  --hy-el-switch-on-color: rgba(var(--hy-success-2), 1);
  --hy-el-switch-off-color: rgba(var(--hy-background-3), 1);
}

.hy-el-switch__core {
  border: 1px solid var(--hy-el-switch-border-color, rgba(var(--hy-border), 1));
}

.hy-el-switch.is-checked .hy-el-switch__core {
  border-color: var(--hy-el-switch-border-color, rgba(var(--hy-auxiliary), 1));

  .hy-el-switch__inner-wrapper {
    color: rgba(var(--hy-main), 1);
    margin-right: 8px;
    font-weight: 700;
  }
}

.hy-el-switch__core .hy-el-switch__inner-wrapper {
  color: rgba(var(--hy-auxiliary), 1);
}

/* 折叠 */
.collapse-item__header_lightColor.hy-el-collapse {

  border-bottom: 1px solid transparent;
  border-top: 1px solid transparent;

  .hy-el-collapse-item {
    margin-top: 8px;
    border-radius: 6px;
    overflow: hidden;

    .hy-el-collapse-item__header {
      border-bottom: 1px solid transparent;
      color: rgba(var(--hy-main), 1);
      line-height: inherit;
      text-align: left;
      font-size: 14px;
      font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
      font-weight: 700;
      display: flex;
      justify-content: space-between;
      position: relative;
      height: 38px;
      padding-left: 20px;

      .hy-el-collapse-item__title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .hy-el-collapse-item__wrap {
      border-bottom: 0px solid transparent;

      .hy-el-collapse-item__content {
        padding-bottom: 0px;
      }
    }

  }
}

// 日历
.hy-el-calendar {
  background-color: rgba(var(--hy-background), 1);
  --hy-el-calendar-border: var(--hy-el-table-border, 1px solid rgba(157, 167, 178, .5));

  .hy-el-calendar__body {
    padding: 0px;
  }

  .hy-el-calendar-table {
    color: rgba(var(--hy-info), 1);

    thead th {
      color: rgba(var(--hy-main), 1);
    }


    td.is-selected {
      box-shadow: 0px 0 12px 0px rgba(var(--hy-theme), 1) inset;
      background: rgba(var(--hy-background-2), 1);

      .hy-el-calendar-day {
        border: 1px solid rgba(var(--hy-theme), 1);
      }
    }

    td.is-today {
      color: rgba(var(--hy-info), 1);
    }

    td.current {
      background-color: rgba(var(--hy-background-2), 1);
    }

    .hy-el-calendar-day:hover {
      border: 1px solid rgba(var(--hy-theme), 1);
      box-shadow: 0px 0 12px 0px rgba(var(--hy-theme), 1) inset;
      background: rgba(var(--hy-background-2), 1);
    }

    &:not(.is-range) td.next,
    &:not(.is-range) td.prev {
      background: rgba(var(--hy-background), 1);

      .hy-el-calendar-day:hover {
        background: rgba(var(--hy-background), 1);
      }
    }

  }
}

.hy-el-notification {
  --hy-el-notification-title-color: rgba(var(--hy-main), 1);
  --hy-el-notification-content-color: rgba(var(--hy-main), 1);
  --hy-el-notification-close-color: rgba(var(--hy-main), 1);
  background: rgba(var(--hy-background-2), 1);
}

.hy-el-tour {
  .hy-el-tour__hollow {
    fill: rgba(0, 0, 0, 0.9) !important;
  }
  .hy-el-tour__content {
    border: 1px solid rgba(var(--hy-theme), 1);
  }
  .hy-el-tour__arrow {
    border: 1px solid rgba(var(--hy-theme), 1);
  }
  .hy-el-tour__title {
    color: rgba(var(--hy-main), 1);
    font-weight: bold;
  }
  .hy-el-tour__body {
    color: rgba(var(--hy-main), 1);
  }
  .hy-el-tour__footer {
    display: none;
  }
}