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

// dimsum components
$ds-input: #{$prefix}-input;

// ********************************************
// elements
$el-addon: #{$input-addon-wrapper}__addon;
$el-addon-right: #{$input-addon-wrapper}__addon--right;
$el-clearable-button: #{$input-addon-wrapper}__clearable;
$input-controller: addon-input-controller;

// ********************************************
// modifiers
$input-error: #{$input-addon-wrapper}--error;
$input-disabled: #{$input-addon-wrapper}--disabled;
$input-read-only: #{$input-addon-wrapper}--readonly;
$input-fuild: #{$input-addon-wrapper}--fluid-width;

// ********************************************
// local
$border-type: solid 1px;
$radius: $theme-base-border-radius;
$input-height: space(m) * 1.17; // TODO: define global input sizes

// TODO: reduce duplicity with input styles
.#{$input-addon-wrapper} {
  @include border-radius($radius);
  display: flex;
  box-shadow: inset 0 0 0 1px color(neutral, 400);
  height: $input-height;
  width: 100%;

  > * {
    height: 100%;

  }
// PUI-3948
  & .#{$el-addon}--error {
    border: 1px solid color(danger, 900);
    border-radius: 2px;
    border-top-left-radius: unset;
    border-bottom-left-radius: unset;
    border-left: none;
    &:focus {
      border: inherit;
    }
  }
// PUI-3948
  &:focus-within .#{$el-addon}--error {
    border: inherit;
  }

  .#{$ds-input} {
    width: 100%;
    flex: 1;
    background: none;

    &.#{$ds-input}--clearable.#{$ds-input}--value:not(.input-disabled) {
      border-right: unset;
      border-top-right-radius: unset;
      border-bottom-right-radius: unset;
    }
  }

  &::-ms-clear {
    display: none;
  }

  &:focus-within {
  }
}


.#{$input-addon-wrapper}:hover, .#{$input-addon-wrapper}:focus, .#{$input-addon-wrapper}:active {
  & .#{$el-addon}--error {
    border: none;
  }
}

.#{$el-clearable-button} {
  opacity: 0;
  transition: duration(fast) easing(base);
  &:hover {
    opacity: 1;
    @include dsHover();
  }
}

.#{$el-addon} {
  display: flex;
  > * {
    height: 100%;
  }

  &:hover {
    @include dsHover();
  }
  
  &.#{$el-addon-right}>.#{$el-clearable-button}:not(.em-ds-input__clearable) {   
    position: relative;
    &:before {
      content: '';
      position: absolute;
      height: 80%;
      top: 10%;
      right: space(m) * 1.17;
      width: calc(#{space(xxs)} * 0.25);
      background: color(neutral, 200);
      pointer-events: none;
    }
    &:focus-within {
      &:before {
        display:  none;
      }  
    }
  }
}

// Mobile
@include md {
  .#{$input-addon-wrapper} {
    height: toMobile(space(l));
  }
}