@import '../../config';
@import '../../mixins';

$datepickerPosition: calc(100% + #{$spacer-md});
$datepickerBeforePosition: -9px;
$datepickerAfterPosition: -8px;

.Datepicker {
  position: relative;

  .Datepicker-input {
    padding-right: $spacer-xxl;
  }
}

.Datepicker-calendar {
  position: absolute;
  top: $datepickerPosition;
  z-index: 2;
  display: none;
  max-width: 100%;
  width: 100%;
  right: 0;

  @include media-up(small) {
    max-width: 334px;
  }

  // Top triangle

  &:before {
    border-color: transparent;
    border-width: 9px;
    border-bottom-color: $form-field-border-color;
    top: $datepickerBeforePosition;
    right: 18px;
  }

  &:after {
    border-color: transparent;
    border-width: 8px;
    border-bottom-color: $color-white;
    right: 19px;
    top: $datepickerAfterPosition;
  }

  &:before,
  &:after {
    content: '';
    display: inline-block;
    position: absolute;
    border-style: solid;
    border-top-width: 0;
  }

  .Datepicker.is-open & {
    display: block;
  }

  .Datepicker.is-reverse & {
    top: auto;
    bottom: $datepickerPosition;

    &:before {
      border: 9px solid transparent;
      border-top-color: $form-field-border-color;
      bottom: $datepickerBeforePosition;
    }
    &:after {
      border: 8px solid transparent;
      border-top-color: $color-white;
      bottom: $datepickerAfterPosition;
    }
    &:before,
    &:after {
      top: auto;
      border-bottom-width: 0;
    }

  }
}

// Calendar icon
.Datepicker .InputGroup-context {
  cursor: pointer;
  width: 50px;
  border-left: none;
  position: absolute;
  right: 0;
  height: 100%;
  top: 0;
  display: flex;
  align-items: center;
  background-color: transparent;
  border: none;

  .Icon--calendar {
    width: 20px;
    height: 20px;
  }
}

.is-readOnly,
.is-disabled {
  .Datepicker .InputGroup-context {
    background-color: transparent;
  }
}

.has-error > .Datepicker > .InputGroup > input {
  background-image: none !important;
}