// Set default variables here,
//
$main-bg:              $white;
$custom-range-bg:      theme-color("light-secondary");

$font-color-01:        $white;
$font-color-02:        theme-color("default");
$font-color-03:        theme-color("default");

$border-color:         $border-color;
$highlighted:          theme-color("light");

$btn-bg:               theme-color("light");
$btn-bg-hover:         theme-color("light-secondary");

$theme-primary:        theme-color("primary");
$theme-secondary: 		 theme-color("secondary");
$theme-minimal: 			 $white;

$disabled-background:  $text-muted;
$disabled-color:       theme-color("light-secondary");

$theme-list: (
  'sirius': $theme-primary,
  'minimal': $theme-minimal
);

// Add imported styles
//
@import "~ngx-bootstrap/datepicker/bs-datepicker.scss";

.bs-datepicker-container {
  @extend .p-0;
}

.bs-datepicker {
  box-shadow:     0 2px 5px rgba($black,.1);
  border:         1px solid $border-color;
  border-radius:  $border-radius;

  &-head {
    background-color: theme-color("primary");

    button {
      &:hover {
        background-color: theme-color("primary-darker");
      }
      &:active {
        background-color: theme-color("primary-darker");
      }
    }

    bs-datepicker-navigation-view {
      @extend .d-flex,
              .justify-content-center,
              .align-items-center,
              .w-100
    }
  }

  &-body {
    border-top:     1px solid $border-color;
    border-right:   none;
    border-bottom: 	none;
    border-left: 	  none;

    table {
      th {
        height: 32px;
        color: theme-color("primary");
      }

      td {
        span.selected { background-color: theme-color("primary"); }
      }
    }
  }
}

// Custom Minimal Theme

.theme-minimal {
  .bs-datepicker-body {
    @extend .border-0;
  }
  .bs-datepicker-head {
    @extend .font-weight-bold;
  }
  .bs-datepicker-head button.next span,
  .bs-datepicker-head button.previous span {
    @extend .text-info;
  }
  .bs-datepicker-head button.current span {
    @extend .text-primary;
  }
  .bs-datepicker-body table td span.selected {
    @extend .bg-secondary;
  }
}