/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

.ouiSuperDatePicker__flexWrapper {
  // Need to offset 8px because of negative margins added by small size gutter
  max-width: calc(100% + #{$ouiSizeS});
  width: $ouiSuperDatePickerWidth + $ouiSuperDatePickerButtonWidth + $ouiSizeS;
}

.ouiSuperDatePicker__flexWrapper--isAutoRefreshOnly {
  width: $ouiFormMaxWidth;
}

.ouiSuperDatePicker__flexWrapper--noUpdateButton {
  width: $ouiSuperDatePickerWidth;
}

.ouiSuperDatePicker {
  // 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;

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

    > .ouiDatePickerRange {
      max-width: none;
      width: auto;
      border-radius: 0 $ouiFormControlBorderRadius $ouiFormControlBorderRadius 0;
    }
  }
}

.ouiSuperDatePicker__startPopoverButton {
  // Fixes margin around delimiter
  // Only needed on first popover since basic .ouiFormControlLayout takes care of the last one
  margin-right: -$ouiSizeM;

  &.ouiSuperDatePicker__startPopoverButton--compressed {
    margin-right: -$ouiSizeS;
  }
}

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

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

    .ouiSuperDatePicker__prettyFormatLink {
      text-decoration: underline;
    }
  }

  &:disabled {
    background-color: $ouiFormBackgroundDisabledColor;
    color: $ouiColorDarkShade;
    cursor: not-allowed;

    .ouiSuperDatePicker__prettyFormatLink {
      display: none;
    }
  }

  &--compressed {
    line-height: $ouiFormControlLayoutGroupInputCompressedHeight;
    height: $ouiFormControlLayoutGroupInputCompressedHeight;
  }
}

.ouiSuperDatePicker__prettyFormatLink {
  color: $ouiLinkColor;
  padding-left: $ouiSizeXS; // Adds some separation between date text and link
  flex-shrink: 0;
}

@include ouiBreakpoint('xs', 's') {
  .ouiSuperDatePicker__flexWrapper {
    width: calc(100% + #{$ouiSizeS});
  }

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