nts-daterange-picker {
  .spacing { margin-right: $basic-padding / 2;}

  .daterange-input-container {
    @include border;
    @include border-radius;

    nts-input {
      width: 228px;
    }
    &.with-arrows {
      nts-input {
        width: 228px + $input-height * 2;
      }
    }
  }
  .arrow-btn {
    &.right { right: 0; }
    &.left { right: $input-height; }
  }
  .main-container {
    &.floating {
      margin-top: 0;
      background-color: white;
      border: solid $color-grey-medium $border-width;
      @include border-radius($border-radius);

      &:before {
        @include pseudo;
        top: -7px;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 7px solid $color-grey-medium;
        border-top: 0;
      }

      &:after {
        @include pseudo;
        top: -5px;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #fff;
        border-top: 0;
      }
      .pickers-container {
        padding: $basic-padding / 3 $basic-padding / 2;
      }
    }
    &.align-right {
      right: 0;
      &:before { right: 6px; }
      &:after { right: 7px; }
    }
    &.align-left {
      left: 0;
      &:before { left: 6px; }
      &:after { left: 7px; }
    }
  }
  .buttons-container {
    background-color: $color-grey-light;
    padding: $basic-padding / 3 0;
  }
}