@import "theme";

.hi-v4-input__inner--focused {
  border: 0 !important;
  box-shadow: none !important;
}

.hi-v4-button:focus {
  box-shadow: none !important;
}

.hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled).focused {
  border: 0;
  box-shadow: none;
}

.hi-v4-number-input--appearance-line {
  border: 0 !important;
}

.hi-v4-modal__footer--divided::before {
  display: none !important;
  //background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, $__form-component-bg-color-dark 0%) !important;
}

.hi-v4-modal__footer--divided::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  content: "";
  display: block;
  width: 100%;
  margin-top: -1rem;
  height: 1px;
}

.hi-v4-popover {
  padding: 0.625rem !important;
}

.dark-mode {
  .hi-v4-input__text {
    color: #fff !important;
  }

  .hi-v4-input__inner {
    border: 0 !important;
    background: $__form-component-bg-color-dark !important;
    color: #fff;
  }

  .hi-v4-input__inner--focused {
    border: 0 !important;
    box-shadow: none !important;
  }


  .hi-v4-mock-input {
    border: 0 !important;
    background-color: $__form-component-bg-color-dark !important;
  }

  .hi-v4-mock-input--appearance-line.hi-v4-mock-input:not(.disabled).focused {
    border: 0;
    box-shadow: none;
  }

  .hi-v4-picker__body {
    background-color: $__form-component-bg-color-dark;
  }

  .hi-v4-select-option--selected {
    background-color: $__form-component-bg-color-dark;
  }

  .hi-v4-select-option--focused {
    background-color: rgba(255, 255, 255, 0.15) !important;
  }

  .hi-v4-select-option__title {
    color: #fff !important;
  }

  .hi-v4-mock-input__value {
    color: #FFFFFF;
  }

  .hi-v4-select-option--selected .hi-v4-select-option__title {
    color: #0688E5 !important;
  }

  .hi-v4-modal__wrapper {
    background: $__primary-bg-color-dark !important;
  }

  .hi-v4-modal__title {
    color: #fff;
    user-select: none;
  }

  .hi-v4-modal__header--divided {
    border-bottom: 1px solid $__form-component-bg-color-dark;
  }

  .hi-v4-form-label__content__text {
    color: #fff !important;
  }

  .hi-v4-modal__footer {
    padding: .6rem;
  }

  .hi-v4-icon-button--effect:hover::before, .hi-v4-icon-button--effect:focus::before {
    background-color: $__form-component-bg-color-dark;
  }

  .hi-v4-number-input__input {
    border: 0 !important;
    background: $__form-component-bg-color-dark !important;
    color: #fff !important;
    border-radius: 4px;
  }

  .hi-v4-number-input--appearance-line {
    border: 0 !important;
  }

  .hi-v4-number-input--focused {
    border: 0 !important;
    box-shadow: none !important;
  }

  .hi-v4-input__prepend {
    background-color: $__form-component-bg-color-dark !important;
    border: 0 !important;;
    color: #607189 !important;;
    width: auto !important;;
    padding: 6px !important;;
    font-size: .8rem !important;;
  }

  .hi-v4-loading__mask {
    background: #00000096 !important;
  }

  .hi-v4-pagination__item {
    background: $__form-component-bg-color-dark !important;
  }

  .hi-v4-pagination__item--active {
    background: $__form-component-bg-color-dark !important;
  }

  .hi-v4-pagination__btn > button, .hi-v4-pagination-mini__btn > button {
    background: $__form-component-bg-color-dark !important;

    &:hover {
      background: $theme-color !important;
    }
  }

  .hi-v4-pagination__item {
    background: $__form-component-bg-color-dark !important;
  }

  .hi-v4-pagination__item--active {
    background: $__form-component-bg-color-dark !important;
  }

  .hi-v4-pagination__btn > button, .hi-v4-pagination-mini__btn > button {
    background: $__form-component-bg-color-dark !important;

    &:hover {
      background: $theme-color !important;
    }
  }

  .hi-v4-drawer__wrapper {
    .hi-v4-drawer__title {
      color: #fff;
    }

    background: $__primary-bg-color-dark !important;
  }

  .hi-v4-popper__container {
    .hi-v4-popper__arrow {
      &::before {
        border-right-color: $__primary-bg-color-dark !important;
      }
    }

    background-color: $__primary-bg-color-dark !important;

    .hi-v4-popover {
      background-color: $__primary-bg-color-dark !important;
    }
  }

  .hi-v4-radio--type-button {
    background-color: #444444 !important;

    .hi-v4-radio__label {
      color: $__primary-bg-color-light;
    }
  }

  .hi-v4-radio--type-button:hover, .hi-v4-radio--type-button[data-checked] {
    background: #237ffa !important;
    color: $__primary-bg-color-light;
  }

  .hi-v4-radio-group--placement-horizontal .hi-v4-radio--type-button::after {
    background: #595959 !important;
  }

  .hi-v4-dropdown-menu {
    background-color: #334358 !important;

    .hi-v4-dropdown-menu-item__trigger {
      color: $color-white !important;
    }
  }

  .hi-v4-dropdown-menu-item:not(.hi-v4-dropdown-menu-item--disabled) > .hi-v4-dropdown-menu-item__trigger {
    background-color: #334358 !important;
  }

  .hi-v4-dropdown-menu-item:not(.hi-v4-dropdown-menu-item--disabled) > .hi-v4-dropdown-menu-item__trigger:hover {
    background-color: $__primary-bg-color-dark !important;
  }

  .hi-v4-tree__popper .hi-v4-tree-action__item:hover {
    background-color: #2E3D4E !important;
  }

  .hi-v4-tree-node--focused .hi-v4-tree-node__wrap {
    background-color: #22303F;
  }

  .hi-v4-tree-node__wrap {
    color: $color-white !important;
  }

  .hi-v4-tree-node__wrap:hover {
    background-color: #22303F !important;
    color: $color-white !important;
  }

  .hi-v4-tree--editable .hi-v4-tree-action-wrap--visible .hi-v4-tree-action-btn {
    color: $color-white !important;
  }

  .hi-v4-tree-node--focused .hi-v4-tree-node__title {
    color: $color-white !important;
  }

  .hi-v4-tree__popper .hi-v4-tree-action {
    background-color: #22303F !important;
    box-shadow: none;

    .hi-v4-tree-action__item {
      color: $color-white !important;
    }
  }

  .hi-v4-upload--drag {
    background: $__primary-sub-bg-color-dark;

    span {
      color: $__primary-bg-color-light !important;
    }

    border: 2px dashed $__primary-bg-color-dark !important;
  }

  .hi-v4-pop-confirm {
    background: $__form-component-bg-color-dark !important;

    .hi-v4-pop-confirm__content-title {
      color: $color-white;
    }
  }
}

.light-mode {
  .hi-v4-input__text {
    color: #3D3D3D !important;
  }

  .hi-v4-input__inner {
    border: 0 !important;
    background: $__primary-input-bg-color-light !important;
  }

  .hi-v4-mock-input {
    border: 0 !important;
    background-color: $__primary-input-bg-color-light !important;
  }

  .hi-v4-select-option--focused {
    background-color: $theme-color !important;
  }

  .hi-v4-select-option__title {
    color: $__primary-input-color-light !important;
  }

  .hi-v4-mock-input__value {
    color: $__primary-input-color-light;
  }

  .hi-v4-select-option--selected .hi-v4-select-option__title {
    color: #1a1a1a !important;
  }

  .hi-v4-modal__wrapper {
    background: $__primary-sub-bg-color-light !important;
  }

  .hi-v4-modal__title {
    color: $__primary-input-color-light;
    user-select: none;
  }

  .hi-v4-modal__header--divided {
    border-bottom: 1px solid #EAEAEA;
  }

  .hi-v4-form-label__content__text {
    color: $__primary-input-color-light !important;
  }

  .hi-v4-modal__footer--divided::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #EAEAEA 100%) !important;
  }

  .hi-v4-icon-button--effect:hover::before, .hi-v4-icon-button--effect:focus::before {
    background-color: #EAEAEA;
  }

  .hi-v4-number-input__input {
    border: 0 !important;
    background: $__primary-input-bg-color-light !important;
    color: $__primary-input-color-light !important;
    border-radius: 4px;
  }

  .hi-v4-number-input--focused {
    border: 0 !important;
    box-shadow: none !important;
  }

  .hi-v4-input__prepend {
    background-color: $__primary-input-bg-color-light !important;
    border: 0 !important;;
    color: #607189 !important;;
    width: auto !important;;
    padding: 6px !important;;
    font-size: .8rem !important;;
  }

  .hi-v4-loading__mask {
    background: #00000096 !important;
  }

  .hi-v4-button--type-secondary {
    border: none;
    background-color: $__primary-input-bg-color-light !important;
    color: $__primary-input-color-light !important;
  }

}

.hi-v4-loading__wrapper {
  width: 100% !important;
}

