// Copyright 2020 Energinet DataHub A/S
//
// Licensed under the Apache License, Version 2.0 (the "License2");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
@use "@angular/material" as mat;
@use "../../utils" as watt;

// The following selectors are taken from Material

.mat-calendar .mat-calendar-header {
  margin-top: -10px;
}

:root {
  @include mat.datepicker-overrides(
    (
      calendar-date-in-range-state-background-color: var(--watt-color-primary-light),
      calendar-date-hover-state-background-color: var(--watt-color-primary),
    )
  );
}

.mat-calendar-body-today:not(.mat-calendar-body-selected):not(
    .mat-calendar-body-comparison-identical
  ) {
  border-color: var(--watt-color-neutral-black);
}

// Set styling on "todays date"
.cdk-program-focused
  .mat-calendar-body-active
  > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(
    .mat-calendar-body-comparison-identical
  ) {
  background-color: transparent;
  color: var(--watt-color-neutral-black);
}

// Set styling on "hover" on "todays date"
.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover
  > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(
    .mat-calendar-body-comparison-identical
  ) {
  background-color: var(--watt-color-primary);
  color: var(--watt-color-neutral-white);
}

// Set styling on dates when navigating with the keyboard
.cdk-keyboard-focused
  .mat-calendar-body-active
  > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(
    .mat-calendar-body-comparison-identical
  ) {
  color: var(--watt-color-neutral-white);
}

.mat-calendar-next-button,
.mat-calendar-previous-button {
  color: var(--watt-color-primary);
}

.mat-calendar-body-in-preview .mat-calendar-body-cell-preview {
  background-color: var(--watt-color-secondary-light);
  border-bottom: 1px solid var(--watt-color-secondary);
  border-top: 1px solid var(--watt-color-secondary);
}
