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

// ********************************************
// input control types
$input-control: #{$prefix}-input;
$input-combox:  #{$prefix}-selectbox-wrapper;
$floating-label-input: #{$prefix}-labeled-outline;
$button-control: #{$prefix}-button;
$icon-button-control: #{$prefix}-icon-button;
$combobox-control: #{$prefix}-selectbox__control;
$form-item: #{$prefix}-form-item;

$component-selectors:"
  .#{$floating-label-input}__idle,
  .#{$input-control},
  .#{$button-control},
  .#{$icon-button-control},
  .#{$combobox-control},
";

.#{$input-addon-group} {
  display: flex;
  align-items: flex-start;

  &__addon {
    position: relative;
    &:hover,
    &:focus-within {
      z-index: 3;
    }
  }

  * {
    &:not(:last-child) {
      margin-right: -1px;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      #{$component-selectors}{
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }

    &:not(:first-child) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      #{$component-selectors}{
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
  }

  .#{$floating-label-input},
  .#{$input-control},
  .#{$input-combox},
  .#{$form-item} {
    position: relative;
    flex: 1;
    margin-top: 0;
    &:focus-within {
      z-index: 3;
    }
    &:hover {
      z-index: 3;
    }
  }
}