%remove-start-radii {
  border-start-start-radius: 0; // border-top-left-radius (ltr reading mode)
  border-end-start-radius: 0; // border-bottom-left-radius (ltr reading mode)

  // required for Safari 14 and below
  // see: https://caniuse.com/mdn-css_properties_border-end-end-radius
  @supports not (border-start-start-radius: 0) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}
%remove-end-radii {
  border-end-end-radius: 0; // border-bottom-right-radius (ltr reading mode)
  border-start-end-radius: 0; // border-top-right-radius (ltr reading mode)

  // required for Safari 14 and below
  // see: https://caniuse.com/mdn-css_properties_border-end-end-radius
  @supports not (border-end-end-radius: 0) {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  }
}

.amplify-field-group {
  gap: var(--amplify-components-fieldgroup-gap);
  align-self: stretch; // ensures input field is always full width

  &--horizontal {
    flex-direction: row;
  }

  &--vertical {
    flex-direction: column;
    align-items: var(--amplify-components-fieldgroup-vertical-align-items);
  }

  // Input styling
  :not(:last-child) .amplify-input {
    @extend %remove-end-radii;
  }
  :not(:first-child) .amplify-input {
    @extend %remove-start-radii;
  }
}
.amplify-field-group__outer-start,
.amplify-field-group__outer-end {
  display: flex;
  align-items: var(--amplify-components-fieldgroup-outer-align-items);
  .amplify-field-group__control {
    height: 100%;
  }
}

/**
 * Outer field group components
 */
.amplify-field-group__outer-start {
  .amplify-field-group__control {
    @extend %remove-end-radii;

    &:not(:focus) {
      border-inline-end-color: transparent;
    }
    &:focus {
      z-index: 1;
    }

    // This targets non first-child controls
    // when there are multiple controls
    &:not(:first-child) {
      @extend %remove-start-radii;
    }
  }

  &--quiet {
    .amplify-field-group__control {
      @extend %remove-start-radii;
      &:not(:focus) {
        border-block-start-color: transparent;
        border-inline-start-color: transparent;
      }
    }
  }

  // Select requires special rules due to icon
  .amplify-select__wrapper {
    .amplify-select {
      @extend %remove-end-radii;
    }
    &:not(:first-child) {
      .amplify-select:not(:first-child) {
        @extend %remove-start-radii;
      }
    }
  }
}
.amplify-field-group__outer-end {
  .amplify-field-group__control {
    @extend %remove-start-radii;

    &:not(:focus) {
      border-inline-start-color: transparent;
    }
    &:focus {
      z-index: 1;
    }

    // This targets non last-child controls
    // where there are multiple controls
    &:not(:last-child) {
      @extend %remove-end-radii;
    }
  }

  &--quiet {
    .amplify-field-group__control {
      @extend %remove-end-radii;
      &:not(:focus) {
        border-block-start-color: transparent;
        border-inline-end-color: transparent;
      }
    }
  }

  // Select requires special rules due to icon
  .amplify-select__wrapper {
    .amplify-select {
      @extend %remove-start-radii;
    }
    &:not(:last-child) {
      .amplify-select {
        @extend %remove-end-radii;
      }
    }
  }
}

/**
 * Inner field group components
 */
.amplify-field-group__field-wrapper {
  position: relative;
  width: 100%;

  &--vertical {
    width: fit-content;
  }
}

// Align inner components above the field wrapper
.amplify-field-group__inner-end,
.amplify-field-group__inner-start {
  position: absolute;
  top: 0;
  height: 100%;
  pointer-events: none;
  .amplify-button {
    pointer-events: all;
    height: 100%;
  }
}
.amplify-field-group__inner-end {
  right: 0;
  left: auto;
}
.amplify-field-group__inner-start {
  right: auto;
  left: 0;
}

// Support RTL languages
// by moving start component to left,
// end component to right
html[dir='rtl'] {
  .amplify-field-group__inner-end {
    right: auto;
    left: 0;
  }
  .amplify-field-group__inner-start {
    left: auto;
    right: 0;
  }
}

// Add input padding for inner components
.amplify-field-group--has-inner-end {
  .amplify-input {
    padding-inline-end: calc(
      var(--amplify-components-fieldcontrol-padding-inline-end) * 3
    );
  }
}
.amplify-field-group--has-inner-start {
  .amplify-input {
    padding-inline-start: calc(
      var(--amplify-components-fieldcontrol-padding-inline-start) * 3
    );
  }
}

/**
 * Inner icon (non-button) component styling requires additional styling
 */
.amplify-field-group__icon:not(.amplify-field-group__icon-button) {
  display: flex;
  padding-inline-start: var(
    --amplify-components-fieldcontrol-padding-inline-start
  );
  padding-inline-end: var(
    --amplify-components-fieldcontrol-padding-inline-start
  );
  flex-direction: column;
  justify-content: center;
  height: 100%;
}