@import '../style/var.less';

.title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-hc-select {
  .fe-search-bar-cancel {
    color: #323232;
  }

  .fe-search-bar-input {
    border-radius: inherit;
  }

  &-container {
    background-color: @white;
    // min-height: 200px;

    &-item {
      height: 54px;
      line-height: 54px;
      font-size: 14px;
      font-weight: 400;
      padding-left: 12px;
      border: 1px solid @content-text-color;
    }

    &-icon {
      float: right;
      top: 16px;
      right: 10px;
    }
  }

  &-title {
    height: 32px;
    line-height: 32px;
    background: #F7F7F7;
    font-size: 12px;
    color: #969696;
    .title-text();
  }

  &-list {
    background-color: @white;
    max-height: 170px;
    overflow: auto;

    &-item {

      height: 40px;
      line-height: 40px;
      // border: 1px solid red;
      display: flex;
      position: relative;

      &-title {
        font-size: 13px;
        padding-left: 43px;
        flex: 1;

        .title-text();
         &::before {
          content: '';
          width: 5px;
          height: 5px;
          border-radius: 50%;
          background-color: #3A8CFF;
          border: 1px solid #3A8CFF;
          position: absolute;
          left: 19px;
          top: 15.5px;
        }
      }

      &.active {
        .fe-hc-select-list-item-title {
          color: #3A8CFF;

          &::before {
            background: #FFFFFF;
          }

        }
      }

      &:first-of-type {
        .fe-hc-select-list-item-click {
          &::before {
            display: none;
          }
        }
      }

      &:last-of-type {
        .fe-hc-select-list-item-click {
          &::after {
            display: none;
          }
        }
      }

      &-click {
        width: 25px;

        &::before {
          content: '';
          // width: 1px;
          height: 17px;
          border-left: 1px dotted #3A8CFF;
          position: absolute;
          left: 22px;
          top: 0px;


        }

        &::after {
          content: '';
          // width: 1px;
          height: 17px;
          border-left: 1px dotted #3A8CFF;
          position: absolute;
          left: 22px;
          bottom: 0px;
        }
      }


    }
  }
}

.search-bar {
  width: 100%;

  &-form,
  &-result {
    padding: 0 10px;
  }

  &-form {
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    height: @search-form-height;
    overflow: hidden;
  }

  &-input {
    flex: 1;
    position: relative;
    width: 100%;
    height: @search-input-height;
    overflow: hidden;
    border-radius: @search-border-radius;
    background-color: @white;
  }

  &-placeholder,
  input[type='search'] {
    position: absolute;
    top: 0;
    left: 0;
  }

  &-placeholder {
    box-sizing: content-box;
    z-index: 1;
    width: 100%;
    height: @search-input-height;
    color: @dark-text-color;
    line-height: @search-input-line-height;
    transition: width 0.3s;
    display: block;
    text-align: center;

    &-focus {
      padding-left: 10px;
      width: auto;
    }

    &-text {
      color: #9c9c9d;
      font-size: @search-input-placeholder-font-size;
    }
  }

  &-icon {
    color: #b2b2b2;
  }

  input[type='search'] {
    z-index: 2;
    opacity: 0;
    width: 100%;
    text-align: left;
    display: block;
    color: @search-bar-input-color;
    height: @search-input-height;
    font-size: @font-size-lg;
    background-color: transparent;
    border: 0;

    &:focus {
      outline: 0;
    }

    &::placeholder {
      background: none;
      text-align: left;
      color: transparent;
    }

    &::-webkit-search-cancel-button {
      -webkit-appearance: none;
    }

    //干掉input[search]默认的clear button
    &::-webkit-search-decoration,
    &::-webkit-search-cancel-button,
    &::-webkit-search-results-button,
    &::-webkit-search-results-decoration {
      display: none;
    }
  }

  & &-clear {
    color: @dark-text-color;
    box-sizing: content-box;
    position: absolute;
    display: none;
    z-index: 3;
    width: 17px;
    height: 17px;
    top: 0;
    right: 0;
    padding: 5.5px;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.3s;

    &-show {
      display: block;
    }
  }

  &-cancel {
    flex: none;
    opacity: 1;
    text-align: right;
    padding-left: 8px;
    height: @search-form-height;
    line-height: @search-form-height;
    text-align: right;
    color: #323232;
  }

  &-focus {
    .search-bar-input {
      input[type='search'] {
        opacity: 1;
        padding: 0 28px 0 31px;

        &::placeholder {
          color: @search-bar-input-placeholder;
        }
      }
    }
  }

  &-type {
    background: @white;

    .search-bar-input {
      background: @search-bar-input-bgcolor;
      font-size: @search-bar-font-size;
    }
  }

  &-result {
    background: @white;
  }

  &-result-item {
    background: @white;
    font-size: @font-size-lg;
    color: #9c9c9d;
    padding: 10px 5px;

    overflow: hidden;

    &-title {
      color: #323232;
      .title-text();
    }

    &-children {
      color: #CCCCCC;
      font-size: 12px;
      padding-top: 8px;
    }

  }

  &-result-noitem {
    height: 92px;
    background: @white;
    font-size: @font-size-lg;
    color: #9c9c9d;
    overflow: hidden;

    &-no {
      text-align: center;
      margin-top: 40px;


    }
  }

  &-bc-clip-padding-box {
    background-clip: padding-box;
  }

  &-bc-clip-content-box {
    background-clip: content-box;
  }
}