/**
 * The background color of suggestion field input that is applied while a user entering value.
 * @group suggestionfield
 */
$cuba-suggestionfield-edit-color: scale-color(lighten($v-focus-color, 35%), $saturation: -15%) !default;

@mixin halo-cuba-suggestionfield($primary-stylename: c-suggestionfield) {
  .#{$primary-stylename} {
    @include valo-textfield-style;
    width: $v-default-field-width;

    &.modified {
      background-color: $cuba-suggestionfield-edit-color;
    }

    &.tiny {
      font-size: $v-font-size--tiny;
      height: $v-unit-size--tiny;
      line-height: normal;
    }

    &.small {
      font-size: $v-font-size--small;
      height: $v-unit-size--small;
      line-height: normal;
    }

    &.large {
      font-size: $v-font-size--large;
      height: $v-unit-size--large;
      line-height: normal;
    }

    &.huge {
      font-size: $v-font-size--huge;
      height: $v-unit-size--huge;
      line-height: normal;
    }
  }

  .#{$primary-stylename}-error {
    @include valo-textfield-error-style;
  }

  .#{$primary-stylename}.v-readonly,
  .#{$primary-stylename}-error.v-readonly {
    @include valo-textfield-readonly-style;

    &:focus {
      border-color: $v-focus-color;
    }
  }

  .#{$primary-stylename}-popup {
    @include valo-selection-overlay-style;

    max-height: $v-selection-item-height * 15;
    min-width: 200px;
    max-width: 400px;
    overflow-y: auto;
    outline: 0px;

    &.c-has-width {
      min-width: auto;
      max-width: none;
    }

    & > div {
      padding-bottom: $v-overlay-padding-vertical;

      .v-ch & {
        padding-bottom: 0;
      }
    }
  }

  .#{$primary-stylename}-item {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    border-radius: 3px;
    cursor: pointer;
    height: $v-selection-item-height;
    line-height: $v-selection-item-height;
    padding-right: $v-selection-item-padding-horizontal*2;
    padding-left: $v-selection-item-padding-horizontal;
  }

  .#{$primary-stylename}-item.selected {
    @include valo-selection-item-selected-style;
  }

  .#{$primary-stylename}.v-disabled,
  .#{$primary-stylename}.v-readonly {
    &::-webkit-input-placeholder {
       color:transparent;
    }

    &:-moz-placeholder {
       color:transparent;
    }

    &::-moz-placeholder {
       color:transparent;
    }

    &:-ms-input-placeholder {
       color:transparent;
    }
  }
}