/*!
 * 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.
 */

/**
 * 1. Account for inner box-shadow style border
 */

.ouiDatePickerRange {
  @include ouiFormControlSize(auto, $includeAlternates: true);
  // Match just the regular drop shadow of inputs
  @include ouiFormControlDefaultShadow();
  display: flex;
  align-items: center;
  padding: 1px; /* 1 */

  // Allow any child to fill entire range container
  > * {
    flex-grow: 1;
  }

  .ouiFieldText.ouiDatePicker {
    box-shadow: none !important; // including all states
    text-align: center;

  }

  .react-datepicker-popper .ouiFieldText.ouiDatePicker {
    // set any subsequent children in popper back to left align
    text-align: left;
  }

  &--inGroup {
    box-shadow: none;
    padding: 0;

    .ouiDatePicker {
      height: $ouiFormControlLayoutGroupInputHeight;
    }
  }

  // Direct descendent selectors to override `> span`

  > .ouiDatePickerRange__delimeter {
    background-color: transparent !important; // override .ouiFormControlLayout--group .ouiText
    line-height: 1 !important;
    flex: 0 0 auto;
    padding-left: calc($ouiFormControlPadding / 2);
    padding-right: calc($ouiFormControlPadding / 2);
  }
}

.ouiDatePickerRange--readOnly {
  background: $ouiFormBackgroundDisabledColor;
}