/* Copyright (c) Fortanix, Inc.
|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@use '../../../../styling/defs.scss' as bk;
@use '../../../../styling/lib/react-datepicker.scss';

@layer baklava.components {
  $caret-width: bk.rem-from-px(18);
  
  .bk-date-picker {
    @include bk.component-base(bk-date-picker);
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-inline-end: calc(-1 * $caret-width);
  }
  
  .bk-date-picker--input {
    inline-size: bk.rem-from-px(134);
    color: bk.$theme-form-text-default;
  }
  
  .bk-date-picker--caret {
    position: relative;
    inset-inline-start: calc(-1 * $caret-width);
    inset-block-start: bk.rem-from-px(-1);
    inline-size: $caret-width;
    block-size: $caret-width;
  }
  
  .bk-date-picker--caret__down {
    // only when the date picker is closed, allow click on caret to pass through the input behind it;
    // if it is open, then we don't, so it counts as a click outside of the input and date picker, which closes it.
    pointer-events: none;
  }
}
