@use './variables' as vars;

.mat-calendar {
  --mat-datepicker-calendar-text-size: 13px;
  --mat-icon-button-state-layer-size: 40px;
  --mat-datepicker-calendar-date-in-range-state-background-color: rgba(133, 90, 255, 0.2);

  --mat-datepicker-calendar-date-hover-state-background-color: rgba(133, 90, 255, 0.2);
  --mat-datepicker-calendar-header-text-color: var(--label-font-color);
  --mat-icon-button-state-layer-color: var(--btn-primary-color);

  --mat-icon-button-ripple-color: rgba(68, 71, 78, 0.12);
  --mat-icon-button-hover-state-layer-opacity: 0.08;
  --mat-icon-button-focus-state-layer-opacity: 0.12;

  --mat-icon-button-pressed-state-layer-opacity: 0.12;
  --mat-datepicker-calendar-navigation-button-icon-color: var(--font-color);
}

.mat-calendar-period-button {
  border-radius: 10px !important;
}