// 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";


// Set default customise component variables here,
// Override it in theme variables files

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

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

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

.bs-datepicker-head,
.bs-datepicker-body table {

	button,
	th {
    font-weight: $font-weight-bold;
    text-transform: uppercase;
	}

	&.days span { width: 2.75rem; }
	span { line-height: 0.875em; }
}

.bs-datepicker-head button.next,
.bs-datepicker-head button.previous {
	span { line-height: 0.875em !important; }
}

.bs-datepicker-head button.next {
	@extend %ml-auto;
}

.bs-datepicker-head button.previous {
	@extend %mr-auto;
}

.bs-datepicker-head button.current {
	@extend %x-flex-center;
}

.bs-datepicker-head button.next,
.bs-datepicker-head button.current,
.bs-datepicker-head button.previous,
.bs-datepicker-body table td span,
.bs-datepicker-body table.months td.is-highlighted span,
.bs-datepicker-body table td span.selected {
	border-radius: $border-radius;
}


// Custom Minimal Theme
.theme-minimal {
	.bs-datepicker-body {
		@extend %border-0;
	}
	.bs-datepicker-head {
		font-weight: $font-weight-bold;
	}
	.bs-datepicker-head button.next span,
	.bs-datepicker-head button.previous span {
    color: theme-color("info");
	}
	.bs-datepicker-head button.current span {
    color: theme-color("primary");
	}
	.bs-datepicker-body table td span.selected {
    background-color: theme-color("secondary");
	}
}