@import "../lib.less";
@import (reference) "../dropdown.less";

.@{veui-prefix}-search-box {
  display: inline-flex;
  width: @dls-input-width;
  color: @dls-input-font-color;
  background-color: @dls-input-background-color;
  border-radius: @dls-input-border-radius-m;

  &[ui~="s"] {
    border-radius: @dls-input-border-radius-s;
  }

  &[ui~="xs"] {
    border-radius: @dls-input-border-radius-xs;
  }

  &[ui~="l"] {
    border-radius: @dls-input-border-radius-l;
  }

  .@{veui-prefix}-input {
    width: 100%;
    overflow: visible;
    border-radius: inherit;

    &:hover {
      z-index: 1;
    }

    @{veui-prefix}-input:focus {
      z-index: 2;
    }

    &-group {
      display: flex;
      flex-grow: 1;
    }

    &-after {
      .@{veui-prefix}-input-clear {
        margin-right: 0;
      }
      .@{veui-prefix}-search-box-action {
        margin-left: @dls-input-content-spacing;
      }
    }
  }

  &-action {
    flex: none;
  }

  &.@{veui-prefix}-readonly {
    background-color: @dls-input-background-color-read-only;
    border-color: @dls-input-border-color-read-only;
    color: @dls-input-font-color-read-only;

    .@{veui-prefix}-search-box-action {
      cursor: not-allowed;
      color: @dls-input-font-color-read-only;
    }
  }

  &.@{veui-prefix}-disabled {
    background-color: @dls-input-background-color-disabled;
    border-color: @dls-input-border-color-disabled;
    color: @dls-input-font-color-disabled;

    .@{veui-prefix}-search-box-action {
      cursor: not-allowed;
      color: @dls-input-font-color-disabled;
    }
  }

  &-suggestion-overlay {
    &:extend(._veui-dropdown-overlay all);
    overflow-y: auto;
    background-color: @dls-option-background-color;
  }

  .@{veui-prefix}-option {
    &:extend(._veui-dropdown-option all);
  }

  &[ui~="inline"] {
    .@{veui-prefix}-input-group {
      border-radius: 0;
    }

    &,
    &.@{veui-prefix}-readonly,
    &.@{veui-prefix}-disabled {
      background: transparent;
    }
  }

  &[ui~="strong"] {
    .@{veui-prefix}-input {
      .@{veui-prefix}-search-box-action {
        display: none;
      }
    }

    .@{veui-prefix}-search-box-action {
      display: flex;
    }
  }
}