//
// Copyright IBM Corp. 2019, 2020
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

$css--plex: true !default;

@import 'carbon-components/scss/globals/scss/css--helpers';
@import 'carbon-components/scss/components/form/form';
@import 'carbon-components/scss/components/date-picker/date-picker';

:host(#{$prefix}-date-picker) {
  @extend .#{$prefix}--date-picker;

  #floating-menu-container {
    position: absolute;
    width: 100%;
  }

  .#{$prefix}--date-picker__calendar.open {
    margin-top: 0;
  }

  .flatpickr-next-month,
  .flatpickr-prev-month {
    svg {
      transform: rotate(0) #{'/*rtl:rotate(180deg)*/'};
    }
  }

  // _date-picker.scss#L351-L360 in `v10.6.0` tree, coping with the CSS class that latest Flatpickr has
  .#{$prefix}--date-picker__day.flatpickr-disabled,
  .flatpickr-day.flatpickr-disabled {
    cursor: not-allowed;
    opacity: 0.5;
    color: $ui-05;

    &:hover {
      background: transparent;
    }
  }

  // _date-picker.scss#L455-L468 in `v10.6.0` tree, coping with the CSS class that latest Flatpickr has
  .flatpickr-next-month.flatpickr-disabled,
  .flatpickr-prev-month.flatpickr-disabled {
    svg {
      fill: $ui-05;
      opacity: 0.5;
      cursor: not-allowed;
    }

    &:hover {
      svg {
        fill: $ui-05;
      }
    }
  }
}

:host(#{$prefix}-date-picker-input),
:host(#{$prefix}-date-picker-input-skeleton) {
  @extend .#{$prefix}--date-picker-container;

  outline: none;
}

:host(#{$prefix}-date-picker-input[color-scheme='light']) .#{$prefix}--date-picker__input {
  background: $field-02;
}

:host(#{$prefix}-date-picker-input[kind='simple']),
:host(#{$prefix}-date-picker-input-skeleton[kind='simple']) {
  .#{$prefix}--date-picker__input {
    width: rem(120px);
  }
}

:host(#{$prefix}-date-picker-input[kind='simple'][size-horizontal='short']),
:host(#{$prefix}-date-picker-input-skeleton[kind='simple'][size-horizontal='short']) {
  .#{$prefix}--date-picker__input {
    width: rem(90px);
  }
}

:host(#{$prefix}-date-picker-input[kind='single']),
:host(#{$prefix}-date-picker-input-skeleton[kind='single']) {
  max-width: rem(288px);

  .#{$prefix}--date-picker__input {
    width: rem(288px);
  }
}

:host(#{$prefix}-date-picker-input[kind='from']),
:host(#{$prefix}-date-picker-input-skeleton[kind='from']) {
  margin-right: rem(1px);
}

:host(#{$prefix}-date-picker-input[kind='from']),
:host(#{$prefix}-date-picker-input[kind='to']),
:host(#{$prefix}-date-picker-input-skeleton[kind='from']),
:host(#{$prefix}-date-picker-input-skeleton[kind='to']) {
  width: rem(143.5px);

  .#{$prefix}--date-picker__input {
    width: rem(143.5px);
  }
}

:host(#{$prefix}-date-picker-input) ::slotted(.#{$prefix}--date-picker__icon) {
  position: absolute;
  right: 1rem;
  fill: $icon-01;
  cursor: pointer;
  z-index: 1;
}

:host(#{$prefix}-date-picker-input-skeleton) {
  display: inline-block;

  .#{$prefix}--label {
    @include skeleton;
    width: rem(75px);
    height: rem(14px);
  }
}