.euiSuperDatePicker {
  display: flex;
  gap: $euiSizeS;
  max-width: 100%;
  // Set a sensible min-width for when width is auto
  min-width: MIN(($euiFormMaxWidth / 2) + $euiSuperDatePickerButtonWidth + $euiSizeS, 100%);
  width: $euiSuperDatePickerWidth + $euiSuperDatePickerButtonWidth + $euiSizeS;

  @include euiBreakpoint('xs', 's') {
    width: 100%;
  }

  &--isAutoRefreshOnly {
    min-width: MIN($euiFormMaxWidth / 2, 100%);
    width: $euiFormMaxWidth;
  }

  &--noUpdateButton {
    min-width: MIN($euiFormMaxWidth / 2, 100%);
    width: $euiSuperDatePickerWidth;
  }

  &--fullWidth {
    width: 100%;
  }

  &--isQuickSelectOnly {
    min-width: 0;
  }

  &--autoWidth {
    display: inline-flex;
    width: auto;
  }

  .euiDatePickerRange {
    flex-grow: 1;
  }

  .euiFormControlLayout {
    max-width: 100%; // Allow it to always grow to fit the container since the default form max width is too small
  }

  .euiFormControlLayout__childrenWrapper {
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: $euiFormBackgroundColor;

    &:last-child {
      border-radius: 0 $euiFormControlBorderRadius $euiFormControlBorderRadius 0;
    }

    & > .euiFormControlLayoutDelimited__input {
      flex-grow: 1;
    }
  }
}

.euiSuperDatePicker__prettyFormat {
  @include euiSuperDatePickerText;
  display: flex;
  justify-content: space-between;
  text-align: left;

  &:not(:disabled):hover,
  &:focus {
    text-decoration: none;
  }

  &:disabled {
    background-color: $euiFormBackgroundDisabledColor;
    color: $euiColorDarkShade;
    cursor: not-allowed;
  }
}

/**
* Make the arrow delimiter match the colors of `.euiDatePopoverButton-needsUpdating`
*/
.euiSuperDatePicker--needsUpdating {
  .euiFormControlLayoutDelimited { // Extra specificity needed to override default delimited styles
    .euiFormControlLayout__childrenWrapper {
      background-color: $euiSuperDatePickerNeedsUpdatingBackgroundColor;
    }

    .euiFormControlLayoutDelimited__delimiter {
      color: $euiSuperDatePickerNeedsUpdatingTextColor;
    }
  }

  .euiFormControlLayout__childrenWrapper {
    transition: background $euiAnimSpeedFast ease-in; // Match @mixin euiSuperDatePickerText / .euiDatePopoverButton
  }
}