:host {
  display: inline-block;
}

.gux-target {
  display: inline-flex;
  gap: var(--gse-ui-formControl-input-gap);
  padding: var(--gse-ui-formControl-textarea-padding);
  cursor: pointer;
  background-color: var(--gse-ui-calendarMenu-backgroundColor);
  border: var(--gse-ui-formControl-input-default-border-width) var(--gse-ui-formControl-input-default-border-style) var(--gse-ui-formControl-input-default-border-color);
  border-radius: var(--gse-ui-formControl-input-borderRadius);
}
.gux-target:focus-within {
  outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
  outline-offset: var(--gse-semantic-focusOutline-offset);
  border: var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);
  border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
}
.gux-target .gux-display {
  display: inline-flex;
  align-items: center;
  min-inline-size: 100px;
  padding-inline-end: var(--gse-ui-formControl-input-gap);
  font-family: var(--gse-ui-formControl-label-text-fontFamily);
  font-size: var(--gse-ui-formControl-label-text-fontSize);
  font-weight: var(--gse-ui-formControl-label-text-fontWeight);
  line-height: var(--gse-ui-formControl-label-text-lineHeight);
  color: var(--gse-ui-formControl-label-labelColor);
}
.gux-target .gux-display .gux-spinner {
  outline: none;
}
.gux-target .gux-display .gux-spinner:not(:first-child) {
  margin-inline-start: 4px;
}
.gux-target .gux-display .gux-spinner:focus-visible {
  background: var(--gse-ui-calendarMenu-month-hover-backgroundColor);
}
.gux-target .gux-popup-toggle {
  justify-content: right;
  color: var(--gse-ui-monthPicker-calendarStates-defaultColor);
  background: transparent;
  border: none;
}
.gux-target .gux-popup-toggle:focus-visible {
  outline: var(--gse-ui-monthPicker-calendarStates-focus-border-width) var(--gse-ui-monthPicker-calendarStates-focus-border-style) var(--gse-ui-monthPicker-calendarStates-focus-border-color);
  outline-offset: var(--gse-semantic-focusOutline-offset);
  border-radius: var(--gse-ui-calendarMenu-month-calendarButton-focusBorderRadius);
}
.gux-target .gux-popup-toggle:not(:disabled):hover {
  color: var(--gse-ui-monthPicker-calendarStates-hoverColor);
  cursor: pointer;
}
.gux-target .gux-popup-toggle:not(:disabled):focus {
  color: var(--gse-ui-monthPicker-calendarStates-activeColor);
  cursor: pointer;
}
.gux-target .gux-popup-toggle:disabled {
  color: var(--gse-ui-monthPicker-calendarStates-disabledColor);
}
.gux-target .gux-popup-toggle.gux-expanded {
  color: var(--gse-ui-monthPicker-calendarStates-activeColor);
}