// Datepicker
.mat-calendar {
  font-family: var(--font-base);
  width: 296px;
  height: 334px;
}

.mat-calendar-table-header th {
  font: {
    size: var(--font-size-xs);
    weight: var(--font-weight-medium);
  }
}

.mat-calendar-period-button {
  font-size: var(--font-size-m);
  display: flex;
  align-items: center;
}

.mat-calendar-body-label {
  font-size: 0;
  color: transparent;
  padding: 0 !important;
}

.mat-calendar-body {
  font-size: var(--font-size-m);
}

.mat-calendar-body-cell-content, .mat-date-range-input-separator {
  color: var(--color-contrast-100);
  border-color: transparent;
}

.mat-calendar-abbr {
  text-decoration: none !important;
}

// Selected
.mat-calendar-body-selected {
  color: var(--color-contrast-0);
  background: var(--color-primary);
}

// Today
.mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
  border-color: var(--color-contrast-20);
}

// Region range
.mat-calendar-body-in-range:before {
  background: var(--color-contrast-2);
}
.mat-calendar-body-in-preview {
  color: rgba(0, 0, 0, .24)
}
.mat-calendar-body-in-range,
.mat-calendar-body-in-range-start {
  // скругление углов между выбранными датами
  tr & {
    &:first-child {
      &:before {
        border-top-left-radius: 999px;
        border-bottom-left-radius: 999px;
      }
    }
    &:last-child {
      &:before {
        border-top-right-radius: 999px;
        border-bottom-right-radius: 999px;
      }
    }
  }
  // убрать скругление для последней даты месяца внутри диапазна (чтобы показать, что диапазон не закончен)
  tr:last-child & {
    &:last-child {
      &:before {
        border-radius: 0;
      }
    }
  }
}
// скругление для дакты в конце диапазона
.mat-calendar-body-range-end:before {
  border-top-right-radius: 999px !important;
  border-bottom-right-radius: 999px !important;
}

// Hover
.cdk-keyboard-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),
.cdk-program-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),
.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: var(--color-contrast-5);
}

// Disabled
.mat-calendar-body-disabled {
  .mat-calendar-body-cell-content {
    color: var(--color-contrast-30);
  }
}