@input-group-class: ~'@{icecream-prefix}-input-group';
@input-group-item-class: ~'@{icecream-prefix}-input-group-item';

.@{input-group-class} {
  .extendBase();

  display: flex;
  flex-direction: row;

  &.@{input-with-size-class} {
    &-size-large, &-size-default, &-size-small {
      padding: 0;
    }
  }

  > * {
    flex: 1 1 0;
  }

  > .@{input-group-item-class} {
    flex: 0 0 auto;
  }

  > .@{input-with-size-class} {
    &-size-large, &-size-default, &-size-small {
      width: initial;
      &.@{input-with-size-class}-layout-inline {
        width: initial;
      }
    }
  }

  > .@{input-with-color-class} {
    border-width: 0;
    border-radius: 0;
  
    &:not(:first-child) {
      border-left-width: 1px;
    }
  
    &:first-child {
      border-top-left-radius: @icecream-border-radius;
      border-bottom-left-radius: @icecream-border-radius;
    }
  
    &:last-child {
      border-top-right-radius: @icecream-border-radius;
      border-bottom-right-radius: @icecream-border-radius;
    }

    &.@{input-with-color-focused-class}, &:hover {
      border-color: @icecream-color-grey-7;
    }
  }
}

.@{input-group-item-class} {
  .extendBase();

  &-grey {
    background-color: @icecream-color-grey-3;
  }
}