.v-component-group {
  display: flex;
  flex-direction: row;

  /* ################## ButtonGroup ################## */
  .v-button:not(:first-child) {
    // border-left-color: var(--secondary-700);
  }

  @each $type in get("type") {
    @if ($type!=fill) {
      &.#{$type} {
        .v-button {
          @extend %button-#{$type};
          @extend %customize-#{$type}-basic !optional;

          &:not(:first-child) {
            // border-left-color: if($type==outline, var(--light-600), transparent);
          }
        }
      }
    }

    @each $color, $value in get(if(get("vaadin.just-semantic"), "color.semantic", "color.list")) {
      $selector: if($type==fill, "&.#{$color}", "&.#{$type}.#{$color}");
      #{$selector} {
        .v-button {
          @extend %extender-color-#{$type}-#{"" + $color};
          @extend %customize-#{$type}-#{"" + $color} !optional;

          @if ($type==fill) {
            &:not(:first-child) {
              // border-left-color: var(--#{$color}-700);
            }
          }
        }
      }
    }
  }

  @each $size, $value in get("size") {
    &.#{$size} {
      .v-button {
        @extend %size-#{$size};
        @extend %padding-button-#{$size};
      }
    }
  }

  /* ###### DateField ###### */
  @each $type in get("type") {
    @each $color, $value in get(if(get("vaadin.just-semantic"), "color.semantic", "color.list")) {
      $selector: if($type==fill, "&.#{$color}", "&.#{$type}.#{$color}");
      #{$selector} {
        .v-datefield {
          @extend %v-datefield-#{$type} !optional;
          @extend %v-datefield-#{$type}-#{"" + $color};
        }
      }
    }
  }

  @each $size, $value in get("size") {
    &.#{$size} {
      .v-datefield {
        @extend %v-datefield-#{$size};
      }
    }
  }

  /* ###### Combobox ###### */
  @each $type in get("type") {
    @each $color, $value in get(if(get("vaadin.just-semantic"), "color.semantic", "color.list")) {
      $selector: if($type==fill, "&.#{$color}", "&.#{$type}.#{$color}");
      #{$selector} {
        .v-filterselect {
          @extend %v-filterselect-#{$type} !optional;
          @extend %v-filterselect-#{$type}-#{"" + $color};
        }

        .v-button {
          @extend %extender-color-#{$type}-#{"" + $color};
          @extend %customize-#{$type}-#{"" + $color} !optional;

          @if ($type==fill) {
            &:not(:first-child) {
              // border-left-color: var(--#{$color}-700);
            }
          }
        }
      }
    }
  }

  @each $size, $value in get("size") {
    &.#{$size} {
      .v-filterselect {
        @extend %v-filterselect-#{$size};
      }
    }
  }

  /* DateField */
  @each $size, $value in get("size") {
    &.#{$size} {
      .v-datefield {
        @extend %v-datefield-#{$size};
      }
    }
  }

  /* TextField */
  @each $size, $value in get("size") {
    &.#{$size} {
      .v-caption {
        @extend %v-caption-#{$size};
      }

      .v-textfield {
        @extend %size-#{$size};

        &.inline-icon {
          @extend %v-textfield-icon-#{$size};
        }
      }
    }
  }

  @each $type in get("type") {
    @each $color, $value in get(if(get("vaadin.just-semantic"), "color.semantic", "color.list")) {
      $selector: if($type==fill, "&.#{$color}", "&.#{$type}.#{$color}");
      #{$selector} {
        .v-textfield {
          @extend %#{$type}-#{"" + $color};
          @extend %input-customize-#{$type}-#{"" + $color};
        }
      }
    }
  }

  .lbs-imagebtn {
    background-color: var(--basic) !important;
    border-top: 1px solid var(--basic-700);
    border-right: 1px solid var(--basic-700);
    border-bottom: 1px solid var(--basic-700);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}
