.gux-time-picker {
  position: relative;
  display: inline-block;
}
.gux-time-picker.gux-error .gux-input-time {
  border-color: var(--gse-ui-formControl-input-error-border-color);
}
.gux-time-picker .gux-input-time {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--gse-ui-formControl-input-gap);
  place-content: stretch center;
  align-items: center;
  inline-size: 100%;
  block-size: var(--gse-ui-formControl-input-textfield-height);
  padding: var(--gse-ui-formControl-input-padding);
  font-family: var(--gse-ui-formControl-input-contentText-fontFamily);
  font-size: var(--gse-ui-formControl-input-contentText-fontSize);
  line-height: var(--gse-ui-formControl-input-contentText-lineHeight);
  color: var(--gse-ui-formControl-input-populatedColor);
  white-space: nowrap;
  background-color: var(--gse-ui-formControl-input-backgroundColor);
  background-image: none;
  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-time-picker .gux-input-time:focus-within {
  outline: var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-semantic-border-focus);
  outline-offset: var(--gse-semantic-focusOutline-offset);
}
.gux-time-picker .gux-input-time:hover:not(:disabled) {
  border: var(--gse-ui-formControl-input-hover-border-width) var(--gse-ui-formControl-input-hover-border-style) var(--gse-ui-formControl-input-hover-border-color);
}
.gux-time-picker .gux-input-time input {
  flex: 1 1 auto;
  align-self: auto;
  order: 0;
  inline-size: 2ch;
  padding: 0;
  font-size: var(--gse-ui-formControl-label-text-fontSize);
  color: var(--gse-ui-formControl-input-populatedColor);
  outline: none;
  background-color: var(--gse-ui-formControl-input-backgroundColor);
  border: none;
}
.gux-time-picker .gux-input-time input.gux-input-time-hours {
  text-align: end;
}
.gux-time-picker .gux-input-time input::placeholder {
  color: var(--gse-ui-formControl-input-placeholderColor);
  opacity: 1;
}
.gux-time-picker .gux-input-time .gux-input-time-am-pm-selector {
  display: grid;
  grid-template: auto 1fr/auto 1fr auto;
  place-items: flex-end;
  padding: 0;
  font-family: var(--gse-ui-formControl-input-prefixSufix-text-fontFamily);
  font-size: var(--gse-ui-formControl-input-prefixSufix-text-fontSize);
  font-weight: var(--gse-ui-formControl-input-prefixSufix-text-fontWeight);
  line-height: var(--gse-ui-formControl-input-prefixSufix-text-lineHeight);
  color: var(--gse-ui-formControl-input-populatedColor);
  outline: none;
  background: transparent;
  border: none;
}
.gux-time-picker .gux-input-time .gux-input-time-am-pm-selector:focus-visible {
  outline: var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-semantic-border-focus);
  outline-offset: var(--gse-semantic-focusOutline-offset);
  border-radius: var(--gse-ui-timePicker-focusAmpm-borderRadius);
}
.gux-time-picker .gux-input-time .gux-input-time-am-pm-selector .gux-meridiem {
  display: none;
  grid-row: 1/1;
  grid-column: 1/1;
}
.gux-time-picker .gux-input-time .gux-input-time-am-pm-selector .gux-meridiem.gux-visible {
  display: inline-block;
}
.gux-time-picker .gux-input-time .gux-clock-button {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  align-self: auto;
  justify-content: center;
  order: 0;
  padding: 0;
  color: var(--gse-ui-formControl-input-inputIcon-iconEndColor);
  outline: none;
  background: transparent;
  border: none;
}
.gux-time-picker .gux-input-time .gux-clock-button.gux-active:not(:disabled) {
  color: var(--gse-ui-timePicker-clockStates-activeColor);
  cursor: pointer;
}
.gux-time-picker .gux-input-time .gux-clock-button:focus-visible {
  outline: var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-semantic-border-focus);
  outline-offset: var(--gse-semantic-focusOutline-offset);
  border-radius: var(--gse-ui-timePicker-focusClock-borderRadius);
}
.gux-time-picker .gux-input-time .gux-clock-button gux-icon {
  padding: var(--gse-ui-timePicker-clock-padding);
}
.gux-time-picker .gux-time-separator {
  padding-block: 0;
  padding-inline: 1ch;
}
.gux-time-picker .gux-list-container {
  max-block-size: 150px;
  margin: 0;
  overflow-y: auto;
  background: var(--gse-ui-menu-backgroundColor);
  border-color: var(--gse-ui-menu-border-color);
  border-style: var(--gse-ui-menu-border-style);
  border-width: var(--gse-ui-menu-border-width);
  border-radius: var(--gse-ui-menu-borderRadius);
  box-shadow: var(--gse-ui-menu-boxShadow);
}