@import '~@/assets/scss/variable.scss';

/* Divider */
.el-divider {
  background-color: var(--color-border-default);
}

/* Radio */
.el-radio-button {
  outline: none;
  user-select: none;
  margin-right: -2px;
}
.el-radio__label {
  font-size: 13px;
}
.el-radio-button--mini .el-radio-button__inner {
  background: transparent;
  width: 90px;
  color: var(--color-text-light);
}
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background-color: var(--color-bg-item);
  color: var(--color-main-green);
  z-index: 1;
  box-shadow: none;
}

/* Checkbox */
.el-checkbox.is-bordered {
  border: 1px solid var(--color-border-default);
  .el-checkbox__label {
    color: var(--color-text-default);
    font-weight: 400;
  }
}

/* Card */
.el-card {
  border: 1px solid var(--color-border-default);
  background-color: var(--color-bg-normal);
}
.el-card.is-hover-shadow:hover {
  box-shadow: 0 2px 12px 0 var(--color-shadow-card);
}
.el-card__header {
  border-bottom: 1px solid var(--color-border-default);
}

/* Form */
.el-form {
  .el-form-item__error {
    white-space: nowrap;
  }
  .el-form-item__label {
    color: var(--color-text-default);
  }
  .el-form-item:not(.will-payload-box) {
    .el-form-item__content {
      span {
        color: var(--color-text-default);
      }
    }
  }
  .el-select {
    width: 100%;
  }
  .el-form-item.is-success .el-input__inner,
  .el-form-item.is-success .el-input__inner:focus,
  .el-form-item.is-success .el-textarea__inner,
  .el-form-item.is-success .el-textarea__inner:focus {
    border-color: var(--color-main-green);
  }
}

/* Icon */
[class^='el-icon-'],
[class*=' el-icon-'] {
  font-weight: 600;
}

/* Button */
.el-button--mini {
  border-radius: 4px;
}
.el-button--outline {
  background: var(--color-bg-normal);
  border: 1px solid var(--color-main-green);
  color: var(--color-main-green);
}
.el-button.is-plain:hover,
.el-button.is-plain:focus {
  background: var(--color-bg-normal);
}
.el-input-number--mini {
  width: 100%;
  .el-input__inner {
    text-align: left;
  }
}

/* Message */
.el-message-box {
  border-radius: 8px;
  background-color: var(--color-bg-messagebox);
  border-color: var(--color-border-default);
  .el-message-box__title {
    color: var(--color-text-title);
  }
  .el-message-box__content {
    color: var(--color-text-default);
  }
}
.el-message-box__btns {
  font-size: 14px;
  .el-button--small {
    font-size: 14px;
    border: none;
    color: var(--color-text-light);
    background: transparent;
    &:hover {
      color: var(--color-minor-green);
      background: transparent;
    }
  }
  .el-button--primary {
    background: transparent;
    &:hover {
      background: transparent;
      color: var(--color-minor-green);
    }
  }
  button:nth-child(2) {
    color: var(--color-main-green);
    margin-left: 0px;
  }
}
.el-message {
  padding: 16px;
  border-radius: 8px;
  background-color: var(--color-bg-normal);
  border: none;
  .el-message__icon {
    font-size: 18px;
  }
  &--success {
    border: 1px solid var(--color-main-green);
    box-shadow: 3px 3px 5px 0px var(--color-shadow-message);
    .el-message__icon,
    .el-message__content {
      color: var(--color-main-green);
    }
  }
  &--warning {
    border: 1px solid var(--color-main-yellow);
    box-shadow: 3px 3px 5px 0px var(--color-shadow-message);
  }
  &--error {
    border: 1px solid var(--color-minor-red);
    box-shadow: 3px 3px 5px 0px var(--color-shadow-message);
  }
}

/* Notification */
.el-notification {
  border-radius: 8px;
  background-color: var(--color-bg-messagebox);
  border-color: var(--color-border-default);
  .el-notification__title {
    color: var(--color-text-title);
    font-weight: normal;
  }
  .el-icon-success {
    color: var(--color-main-green);
  }
  .el-notification__title {
    word-break: break-word;
  }
}

/* Dialog */
.el-dialog {
  background: var(--color-bg-normal);
  border-radius: 8px;
  .el-dialog__header {
    padding: 0 20px;
    line-height: 56px;
    border-bottom: 1px solid var(--color-border-default);
    .el-dialog__title {
      color: var(--color-text-title);
      font-size: $font-size--subtitle;
    }
  }
}

/* Input */
.el-input {
  .el-input__inner {
    background: var(--color-bg-normal);
    border: 1px solid var(--color-border-default);
    color: var(--color-text-default);
    &::placeholder {
      color: var(--color-text-light);
    }
  }
  &.is-disabled .el-input__inner {
    border-color: var(--color-border-default);
    background-color: var(--color-bg-normal);
  }
}
.el-textarea {
  .el-textarea__inner {
    background: var(--color-bg-normal);
    border: 1px solid var(--color-border-default);
    color: var(--color-text-default);
    &::placeholder {
      color: var(--color-text-light);
    }
  }
}

/* Input Number */
.el-input-number.is-controls-right {
  .el-input-number__decrease,
  .el-input-number__increase {
    background: var(--color-bg-normal);
    border-left: 1px solid var(--color-border-default);
  }
  .el-input-number__increase {
    border-bottom: 1px solid var(--color-border-default);
  }
}

/* Popper */
.el-popover__title {
  color: var(--color-text-title);
}
.el-popper {
  background: var(--color-bg-messagebox);
  border-color: var(--color-border-default);
  word-break: break-word;
  color: var(--color-text-default);
  li {
    color: var(--color-text-default);
  }
}
.el-popper[x-placement^='right'] .popper__arrow {
  border-right-color: var(--color-border-default);
  &::after {
    border-right-color: var(--color-bg-messagebox);
  }
}
.el-popper[x-placement^='bottom'] .popper__arrow {
  border-bottom-color: var(--color-border-default);
  &::after {
    border-bottom-color: var(--color-bg-messagebox);
  }
}
.el-popper[x-placement^='top'] .popper__arrow {
  border-top-color: var(--color-border-default);
  &:after {
    border-top-color: var(--color-bg-messagebox);
  }
}

/* Select Dropdown Item */
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background: var(--color-bg-item);
}
.el-select-dropdown__item.selected {
  font-weight: 500;
}

// Fix css style bug in open el-dialog
.el-popup-parent--hidden {
  padding-right: 0px !important;
}

/* Tootip */
.el-tooltip__popper.is-light {
  color: var(--color-text-right_block);
}

/* Color picker */
.el-color-picker__panel {
  background: var(--color-bg-normal);
  border-color: var(--color-border-default);
}
.el-color-dropdown__btn {
  border-color: var(--color-border-default);
  background: transparent;
  color: var(--color-text-default);
}

/* Icon */
.el-icon-refresh {
  cursor: pointer;
  color: var(--color-main-green);
}

/* Autocomplete */
.el-autocomplete {
  width: 100%;
}
.el-autocomplete-suggestion li:hover {
  color: var(--color-main-green);
  background-color: var(--color-bg-item);
}

/* Dropdown */
.el-dropdown-menu__item--divided:before {
  background-color: var(--color-bg-messagebox);
}
.el-dropdown-menu__item--divided {
  position: relative;
  margin-top: 6px;
  border-top: 1px solid var(--color-border-default);
}
.el-dropdown-menu__item.is-disabled {
  color: var(--color-text-tips);
}

/* Loading */
.el-loading-mask {
  background-color: var(--color-bg-primary);
}

/* Skeleton */
.el-skeleton.is-animated .el-skeleton__item {
  background: linear-gradient(
    90deg,
    var(--color-bg-skeleton) 25%,
    var(--color-bg-skeleton_transition) 37%,
    var(--color-bg-skeleton) 63%
  );
  background-size: 400% 100%;
  animation: el-skeleton-loading 1.4s ease infinite;
  @keyframes el-skeleton-loading {
    0% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0 50%;
    }
  }
}

/* Tag */
.el-tag {
  &.el-tag--info {
    background-color: transparent;
    border-color: var(--color-border-default);
    color: var(--color-text-tips);
  }
}

/* Progress */
.el-progress {
  .el-progress-bar__outer {
    background-color: var(--color-bg-code);
    border-radius: 4px;
    .el-progress-bar__inner {
      border-radius: 4px;
    }
  }
  .el-progress__text {
    color: var(--color-text-default);
  }
}

/* Tabs */
.el-tabs {
  .el-tabs__item {
    color: var(--color-text-title);
    &.is-active {
      color: var(--color-main-green);
    }
  }
  .el-tabs__nav-wrap::after {
    background-color: var(--color-border-default);
  }
}

/* Date-picker */
.el-range-editor {
  &.el-input__inner {
    background-color: var(--color-bg-normal);
    border: 1px solid var(--color-border-default);
  }

  .el-range-input {
    color: var(--color-text-default);
    background-color: var(--color-bg-normal);
  }

  .el-range-separator {
    color: var(--color-text-default);
  }
}

.el-date-table {
  th {
    color: var(--color-text-default);
    border-bottom: 1px solid var(--color-border-default);
  }

  td {
    &.start-date,
    &.end-date {
      div {
        background-color: var(--color-bg-code);
      }
    }

    &.in-range div {
      background-color: var(--color-bg-code);
    }

    &.disabled div {
      background-color: var(--color-bg-normal);
    }
  }
}

.el-picker-panel {
  &__sidebar,
  *[slot='sidebar'] {
    background-color: var(--color-bg-messagebox);
    border-right: 1px solid var(--color-border-default);
  }

  &__shortcut {
    color: var(--color-text-default);
  }

  &__footer {
    border-top: 1px solid var(--color-border-default);
    background-color: var(--color-bg-messagebox);
  }

  &__icon-btn {
    color: var(--color-text-default);
  }
}

.el-date-range-picker {
  &__time-header {
    border-bottom: 1px solid var(--color-border-default);

    > .el-icon-arrow-right {
      color: var(--color-text-default);
    }
  }

  &__content.is-left {
    border-right: 1px solid var(--color-border-default);
  }
}

.el-time-spinner__item {
  &.active:not(.disabled) {
    color: var(--color-main-green);
  }

  &:hover {
    background-color: transparent !important;
    color: var(--color-main-green) !important;
  }
}

.el-time-panel {
  &__btn {
    color: var(--color-text-default);
  }

  &__footer {
    border-top: 1px solid var(--color-border-default);
  }
}
