@import "../lib.less";

.@{veui-prefix}-input-group {
  display: inline-flex;
  align-items: stretch;

  .@{veui-prefix}-span,
  .@{veui-prefix}-label {
    display: flex;
    align-items: center;
    line-height: 1;
    border: 1px solid @dls-input-border-color;
    padding: 0 @dls-input-padding;
    border-radius: inherit;
    font-size: inherit;
  }

  &[ui~="xs"] {
    border-radius: @dls-input-border-radius-xs;
    font-size: @dls-input-font-size-xs;
  }

  &[ui~="s"] {
    border-radius: @dls-input-border-radius-s;
    font-size: @dls-input-font-size-s;
  }

  &[ui~="m"] {
    border-radius: @dls-input-border-radius-m;
    font-size: @dls-input-font-size-m;
  }

  &[ui~="l"] {
    border-radius: @dls-input-border-radius-l;
    font-size: @dls-input-font-size-l;
  }

  & & {
    border-radius: inherit;
    font-size: inherit;
  }

  & > [class*="@{veui-prefix}"] {
    position: relative;
    margin-right: -1px;
    z-index: 1;

    &:first-child:not(:last-child) {
      .border-right-radius(0);
    }

    &:last-child:not(:first-child) {
      .border-left-radius(0);
    }

    &:not(:first-child):not(:last-child) {
      border-radius: 0;
    }

    &:hover {
      z-index: 2;
    }

    &[class*="-focus"],
    &[data-focus-visible-added] {
      z-index: 3;
    }

    &.@{veui-prefix}-disabled {
      z-index: 0;
    }
  }
}