.erda-configurable-filter-btn {
  height: 28px;
  color: $color-default-4;

  .filter-text,
  .filter-icon {
    color: $color-default-8;
  }
  &:hover {
    color: $color-default-8;
  }

  .ant-badge-dot {
    box-shadow: none !important;
  }
}

.erda-configurable-filter-clear-btn {
  height: 28px;
  background-color: rgba($color-default, 0.04);
}

.erda-configurable-filter {
  padding-top: 0;

  .ant-popover-inner-content {
    display: flex;
    color: $color-default;
    max-height: 70vh;
    padding: 0 8px 12px;
  }

  .ant-popover-arrow {
    display: none;
  }

  .ant-select-selection-placeholder {
    color: $color-default-3;
  }

  .ant-form-item-label label {
    color: $color-default-6 !important;
  }

  .ant-select-dropdown {
    padding: 0.5rem 0;
    background-color: $color-dropdown-bg-dark;

    .ant-select-item {
      padding: 5px 8px;
    }

    .ant-select-item-option-selected {
      background-color: transparent;
    }

    .ant-select-item-option-state {
      color: $color-purple-deep;
    }

    .rc-virtual-list-holder {
      padding: 0 0.5rem;
    }
  }

  .ant-select-selection-item {
    padding-left: 0;
    padding-right: 0;
    margin-right: 0;
    color: $color-default;
    border: none;
    background-color: transparent;

    &-remove {
      display: none;
    }
  }

  .ant-select:not(.erda-tags-select)
    .ant-select-selection-overflow-item:not(:nth-last-child(2))
    .ant-select-selection-item:after {
    content: ',';
    margin-right: 0.5rem;
  }

  .erda-tags-select {
    .twt-tag-item {
      height: 20px;
      line-height: 20px;
      margin-left: 0;
      margin-right: 4px;
    }

    .rc-virtual-list-holder-inner {
      flex-direction: row !important;
      flex-wrap: wrap;
    }

    .ant-select-item {
      padding: 0;
      margin-right: 4px;
      background-color: transparent !important;
    }

    .ant-select-item-option-state {
      display: none;
    }
  }

  .ant-input {
    background-color: $color-default-06 !important;
    border: none;
  }

  .ant-input-affix-wrapper {
    background-color: $color-default-06 !important;
    border: none;

    .ant-input {
      background-color: transparent !important;
    }
  }

  &-config-select {
    padding: 3px 0;
    line-height: 24px;
  }

  &-body {
    .ant-form-vertical .ant-form-item-label {
      padding-bottom: 4px;
    }
    .ant-form-item {
      margin-bottom: 16px;
    }
    .ant-select {
      .ant-select-clear {
        right: 0;
        top: -1rem;
        width: auto;
        color: $color-purple-highlight;
        background-color: transparent;
      }

      &.ant-select-open {
        .ant-select-clear {
          opacity: 1;
        }
      }

      .anticon-check {
        color: $color-purple-highlight;
      }

      .ant-select-item-option-grouped {
        padding-left: 24px !important;
      }

      .ant-select-item-group {
        font-weight: bold;
      }
    }

    .ant-select-arrow {
      transform: scale(1.5);
      transition: 0.2s;
    }

    .ant-select-open {
      .ant-select-selector {
        border: 1px solid $color-purple-highlight !important;
      }

      .ant-select-arrow {
        transform: scale(1.5) rotate(180deg);
      }
    }

    .ant-select-selector {
      padding-left: 0.5rem;
      padding-top: 0;
      padding-bottom: 0;
      margin: 0;
      border-color: transparent !important;
      background-color: $color-default-06 !important;

      .ant-select-selection-search {
        margin-left: 0;
      }
    }

    .erda-form-date-range {
      display: flex;
      align-items: center;
      border: 1px solid transparent;
      border-radius: 3px;
      background-color: $color-default-06 !important;

      &.erda-form-date-range-open {
        border: 1px solid $color-purple-highlight !important;
      }

      .erda-form-date-range-clear {
        color: $color-purple-highlight;
      }

      &:hover {
        .erda-form-date-range-clear {
          opacity: 1 !important;
        }
      }

      .ant-picker {
        flex: 1;

        .ant-picker-suffix {
          color: $color-default-3;
        }

        &:first-child {
          .ant-picker-suffix {
            display: none;
          }
        }

        .ant-picker-clear {
          color: $color-default-3;

          & > span {
            background-color: $color-default-08;
          }
        }
      }

      .divider {
        color: $color-default-04;
      }

      &:focus {
        border: 1px solid $color-purple-highlight;
      }
    }
  }

  .erda-badge-status-default {
    color: $color-default-1;
    background-color: $color-default-1;
  }

  &-footer {
    .ant-btn:not(.ant-btn-primary) {
      border: none;
      color: $color-default;
      background-color: $color-default-06;
    }
  }

  input {
    color: $color-default;

    &::-webkit-input-placeholder {
      /* WebKit browsers */
      color: $color-default-3;
    }

    &::-moz-placeholder {
      /* Mozilla Firefox 19+ */
      color: $color-default-3;
    }
  }

  .load-more-selector {
    background-color: $color-default-06;
    border: none;
  }
}

.ant-picker-dropdown {
  z-index: 1100;
}
