/* 
 * Caution: "global styles" get injected into every component and can cause file size bloat.
 * These should only include SASS variables and mixins that are not written out to CSS directly
 */
/*
* @prop --cbp-form-field-wrapper-padding-start: inherit; 
* @prop --cbp-form-field-wrapper-padding-end: inherit;
*/
:root {
  --cbp-form-field-wrapper-padding-start: var(--cbp-form-field-padding-inline);
  --cbp-form-field-wrapper-padding-end: var(--cbp-form-field-padding-inline);
  --cbp-form-field-overlay-start-width: 0;
  --cbp-form-field-overlay-end-width: 0;
  --cbp-form-field-attached-button-width: 0;
}

cbp-form-field-wrapper {
  position: relative;
  display: flex;
  gap: var(--cbp-space-4x);
}
cbp-form-field-wrapper .cbp-form-field-wrapper-shrinkwrap {
  position: relative;
  display: block;
  flex-basis: 100%;
}
cbp-form-field-wrapper .cbp-form-field-wrapper-shrinkwrap input:not(#fakeId) {
  padding-inline-start: calc(var(--cbp-form-field-overlay-start-width) + var(--cbp-form-field-wrapper-padding-start));
  padding-inline-end: calc(var(--cbp-form-field-overlay-end-width) + var(--cbp-form-field-wrapper-padding-end));
}
cbp-form-field-wrapper .cbp-form-field-wrapper-shrinkwrap [slot] {
  position: absolute;
  inset-block-start: 0;
  display: inline-flex;
  align-items: center;
  height: 100%;
  color: var(--cbp-form-field-color);
}
cbp-form-field-wrapper .cbp-form-field-wrapper-shrinkwrap [slot=cbp-form-field-overlay-start] {
  inset-inline-start: var(--cbp-space-2x);
  font-weight: var(--cbp-font-weight-bold);
  font-style: italic;
}
cbp-form-field-wrapper .cbp-form-field-wrapper-shrinkwrap [slot=cbp-form-field-overlay-end] {
  inset-inline-end: calc(var(--cbp-form-field-attached-button-width) + var(--cbp-space-2x));
  font-style: italic;
}
cbp-form-field-wrapper .cbp-form-field-wrapper-shrinkwrap [slot=cbp-form-field-attached-button] {
  --cbp-button-border-radius: 0 var(--cbp-border-radius-soft) var(--cbp-border-radius-soft) 0;
  inset-inline-end: 0;
}
cbp-form-field-wrapper .cbp-form-field-wrapper-shrinkwrap [slot=cbp-form-field-attached-button] cbp-segmented-button-group cbp-button:first-child {
  --cbp-button-border-radius: 0;
}
cbp-form-field-wrapper [slot=cbp-form-field-unattached-buttons] {
  display: flex;
  gap: var(--cbp-space-4x);
}