// ********************************************
// container definition
$expandable-container: #{$prefix}-expandable-input;

$input-controller: #{$prefix}-input;
$input-addon-wrapper: #{$prefix}-input-addon-wrapper;
$btn-controller: #{$prefix}-button;

$radius: $theme-base-border-radius;
$border-type: border-size() solid;
$input-height: space(m) * 1.17; // TODO: define global input sizes
$btn-min-width: space(m) * 1.3;
$btn-min-width-diff: space(m) * 1.3 - 0.3;

.#{$expandable-container} {
  display: flex;
  position: relative;
  height: $input-height;
  outline: none;
  color: color(neutral, 500);
  box-sizing: border-box;
  background: color(neutral, 000);
  transition: all duration(base) easing(base);
  width: $btn-min-width;
  @include border-radius($radius);

  .#{$input-controller}:focus, .#{$btn-controller}:focus {
    box-shadow: none;
  }

  > * {
    width: 100%;
  }

  .#{$input-addon-wrapper} {
    border: none;
    height: initial;
    flex: initial;
    transition: all duration(base) easing(base);
    .expandable-input__input {
      width: 0;
      position: relative;
      opacity: 0;
      border: none;
      padding: 0;
      flex: initial;
      transition: all duration(base) easing(base);
    }
    &__addon:last-child {
      position: absolute;
      right: 0;
    }

  }

  .#{$btn-controller} {
    height: 100%;
  }

  &__wrapper {
    width: 100%;
  }

  &--opened {
    width: 100%;
    @include dsFakeBorder();

    .#{$input-addon-wrapper} {
      .expandable-input__input {
        opacity: 1;
        width: calc(100% - #{$btn-min-width-diff});
        padding: 0 space(xs);
        position: relative;
        z-index: 2;
        &:focus,
        &:focus-within {
          @include dsFocus();
        }
        .expandable-input__input{
          &:focus,
          &:focus-within {
            @include dsClearFocus();
          } 
        }
      }
    }
  }
}