.euiSuperDatePicker__flexWrapper {
  // Need to offset 8px because of negative margins added by small size gutter
  max-width: calc(100% + #{$euiSizeS});
  width: $euiSuperDatePickerWidth + $euiSuperDatePickerButtonWidth + $euiSizeS;
}

.euiSuperDatePicker__flexWrapper--isAutoRefreshOnly {
  width: $euiFormMaxWidth;
}

.euiSuperDatePicker__flexWrapper--noUpdateButton {
  width: $euiSuperDatePickerWidth;
}

.euiSuperDatePicker {
  // sass-lint:disable-block no-important
  // Allow it to always grow to fit the container since the default form max width is too small
  max-width: 100% !important;

  > .euiFormControlLayout__childrenWrapper {
    flex: 1 1 100%;
    overflow: hidden;

    > .euiDatePickerRange {
      max-width: none;
      width: auto;
      border-radius: 0 $euiFormControlBorderRadius $euiFormControlBorderRadius 0;
    }
  }
}

.euiSuperDatePicker__startPopoverButton {
  // Fixes margin around delimiter
  // Only needed on first popover since basic .euiFormControlLayout takes care of the last one
  margin-right: -$euiSizeM;
}

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

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

    .euiSuperDatePicker__prettyFormatLink {
      text-decoration: underline;
    }
  }

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

    .euiSuperDatePicker__prettyFormatLink {
      display: none;
    }
  }
}

.euiSuperDatePicker__prettyFormatLink {
  color: $euiLinkColor;
  padding-left: $euiSizeXS; // Adds some separation between date text and link
  flex-shrink: 0;
}

@include euiBreakpoint('xs', 's') {
  .euiSuperDatePicker__flexWrapper {
    width: calc(100% + #{$euiSizeS});
  }

  .euiSuperDatePicker__prettyFormatLink {
    flex-shrink: 1;
    min-width: 3em; // Ensures at least "Show" is always visible
  }
}