.bp-daterange-picker {
  position: relative;
  display: inline-block;

  input[type=number] {
    -moz-appearance: textfield;
  }

  .bp-daterange-inputs {
    display: inline-block;
    border: 1px solid $bp-color-wave;
    border-radius: 8px;
    background-color: $bp-color-white;
    padding: 0 $u;
    color: $bp-color-city;
    font-size: $bp-fs-6;

    &:hover, &--active {
      @include bp-shadow(0, 0, 1px, 1px, $bp-color-bot);
    }

    .bp-daterange-icon {
      padding: 0;
      vertical-align: middle;
      @include fixed-size(2.5*$m);
      padding: 0.2*$m;
      background-color: $bp-color-sky;
      border-radius: 5px;
      display: inline-block;

      svg path {
        fill: $bp-color-bot;
      }
    }

    input {
      width: 14*$m;
      text-align: center;
      vertical-align: middle;
      @include placeholder($bp-color-cloud);

      &::-ms-clear {
        display: none;
      }
    }
  }

  .bp-daterange-dropdown {
    position: absolute;
    margin-top: 0.2*$m;
    background-color: $bp-color-white;
    border-radius: 8px;
    z-index: 10;
    box-shadow: 0px 0px 10px rgba(96, 123, 153, 0.4);

    .bp-daterange-datepicker {
      display: flex;
      padding: $m;
    }

    .bp-daterange-buttons {
      margin: 4*$u 2*$u 2*$u;
      display: flex;
      justify-content: flex-end;

      .bp-daterange-cancel, .bp-daterange-apply {
        min-width: 5*$m;
        height: 3*$m;
        padding: $u 2*$u;
        line-height: normal;
        border-radius: 8px;
      }

      .bp-daterange-cancel {
        @include bp-btn--text-only($bp-color-cloud);
        background-color: transparent;
        color: $bp-color-cloud;
      }

      .bp-daterange-apply {
        @include bp-btn--regular($bp-color-white, $bp-color-bot);
      }
    }
  }
}