// ********************************************
// container definition
$input-container: #{$prefix}-searchbox-toggle;
$el-input: #{$prefix}-input;
$expandable-input: #{$prefix}-expandable-input;
$input-addons: #{$prefix}-input-addon-wrapper;

$el-addon: #{$input-addons}__addon;
$el-clearable-button: #{$el-input}__clearable;

.#{$input-container} {
  .#{$expandable-input} {
    width: 2.2rem;
  }
  .#{$el-input}.expandable-input__input {
    &:not(.floating-label-input-controller):hover {
      @include dsClearFocus();
    }
    &:active {
      @include dsClearFocus();
    }
  }

  .#{$input-addons} {
    &:focus-within,
    &:active {
      .#{$el-addon} .#{$el-clearable-button} {
        @include dsClearFocus();
      }
    }

    &:hover {
      .#{$el-addon} .#{$el-clearable-button} {
        @include dsClearFocus();
      }
    }
  }
}