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

@header-search-prefix: ~'@{opt-prefix}header-search';

.@{header-search-prefix} {
  display        : flex;
  flex-direction : row;
  justify-content: flex-start;
  align-items    : center;

  &.light {
    .@{header-search-prefix}__icon {
      color: #ffffff;
    }

    .ant-select-selection__placeholder,
    .ant-input.ant-select-search__field {
      color: #ffffff;
    }
  }

  &__icon {
    font-size: 22px;
    color    : #333333;
    cursor   : pointer;
  }

  &__input {
    width        : 0;
    background   : transparent;
    border-radius: 0;
    transition   : width 0.3s, margin-left 0.3s;

    &.show {
      width      : 210px;
      margin-left: 8px;
    }

    &,
    &:hover,
    &:focus {
      border-bottom: 1px solid @color_func_border_divide;
    }

    .ant-select-selection {
      background: transparent;
    }

    input {
      padding-right: 0;
      padding-left : 0;
      border       : 0;
      box-shadow   : none !important;
    }
  }
}