@import '../../scss/_bootstrap-extended/functions';

@mixin bs-datepicker-theme($background, $color: null) {
  $color: if($color, $color, color-contrast($background));
  $range-bg: rgba-to-hex(rgba($background, 0.16), $card-bg);
  $range-color: $background;

  .datepicker {
    table {
      tr td {
        .focused,
        span.active,
        span.active.disabled,
        &.range-start,
        &.range-end {
          background: $background !important;
          color: $color !important;
          box-shadow: 0 0.125rem 0.25rem 0 rgba($background, 0.4);
        }

        &.active,
        &.active.highlighted {
          color: $background;
          background: rgba-to-hex(rgba($background, 0.16), $card-bg);
        }

        &.range,
        &.range.highlighted,
        &.range.today {
          color: $range-color !important;
          background: $range-bg !important;

          &.focused {
            background: rgba-to-hex(rgba($background, 0.16), $card-bg) !important;
          }

          &.disabled {
            background: transparentize($range-bg, 0.5) !important;
            color: transparentize($range-color, 0.5) !important;
          }
        }

        &.today:not(.active) {
          background-color: $background !important;
          color: $color !important;
          box-shadow: 0 0.125rem 0.25rem 0 rgba($background, 0.4);
        }
      }
    }
  }
}

@mixin bs-datepicker-dark-theme($background, $color: null) {
  $color: if($color, $color, color-contrast($background));
  $range-bg: rgba($background, 0.16);
  $range-color: $background;

  .datepicker {
    table {
      tr td {
        .focused,
        span.active,
        span.active.disabled,
        &.range-start,
        &.range-end {
          color: $color !important;
          background: $background !important;
          box-shadow: 0 0.125rem 0.25rem 0 rgba($background, 0.4);
        }

        &.active,
        &.active.highlighted {
          color: $background;
          background: rgba($background, 0.16);
        }

        &.range,
        &.range.highlighted,
        &.range.today {
          color: $range-color !important;
          background: $range-bg !important;

          &.disabled {
            color: transparentize($range-color, 0.5) !important;
            background: transparentize($range-bg, 0.5) !important;
          }

          &.focused {
            background: rgba($background, 0.16) !important;
          }
        }

        &.today:not(.active),
        &.today:not(.active):hover {
          background-color: $background !important;
          color: $color !important;
          box-shadow: 0 0.125rem 0.25rem 0 rgba($background, 0.4);
        }
      }
    }
  }
}