@use '_variables' as *;
@forward '_variables';

.filter-help-popover {
  font-family: 'Asap', sans-serif;
  background: #f3ecf6 !important;
  border: 1px solid $app-primary-color !important;
  border-radius: 4px !important;
  color: #303133 !important;
  font-size: 12px !important;
  line-height: 18px !important;

  > div {
    word-break: break-word;
    text-align: initial;
  }

  ul {
    padding-left: 1.5rem;

    > li + li {
      margin-top: 0.5rem;
    }
  }

  .el-popper__arrow::before {
    background: #f3ecf6 !important;
    border-color: $app-primary-color !important;
  }

  &[data-popper-placement^='bottom'] .el-popper__arrow:before {
    border-bottom-color: transparent !important;
    border-right-color: transparent !important;
  }

  code {
    font-size: 90%;
  }
}

.header {
  display: flex;
  align-items: center;

  .el-button {
    font-family: inherit;

    &:hover,
    &:focus {
      background: $app-primary-color;
      box-shadow: -3px 2px 4px #00000040;
      color: #ffffff;
    }
  }
}

.help {
  width: 24px !important;
  height: 24px;
  transform: scale(1.1);
  cursor: pointer;
  color: #ffffff !important;
}

.search-input {
  width: 298px !important;
  height: 40px;
  padding-right: 14px;
  font-family: inherit;

  :deep(.el-input__inner) {
    font-family: inherit;
  }
}

.search-input-container {
  position: relative;
  display: flex;
  align-items: center;

  .map-icon {
    position: absolute;
    right: 18px;
    color: $app-primary-color !important;
  }

  &.is-focus {
    .map-icon {
      display: none;
    }
  }
}