calendar.scss

@use '../core/style/layout-common';

$calendar-padding: 8px !default;
$calendar-header-divider-width: 1px !default;
$calendar-controls-vertical-padding: 5%;
// We use the same padding as the month / year label, but subtract 16px since there is padding
// between the edge of the button and the text. This ensures that the button text lines up with
// the month / year label text.
$calendar-controls-side-margin: calc(33% / 7 - 16px);

$calendar-arrow-size: 5px !default;
$calendar-arrow-disabled-opacity: 0.5 !default;

// Values chosen to approximate https://material.io/icons/#ic_navigate_before and
// https://material.io/icons/#ic_navigate_next as closely as possible.
$calendar-prev-next-icon-border-width: 2px;
$calendar-prev-next-icon-margin: 15.5px;
$calendar-prev-icon-transform: translateX(2px) rotate(-45deg);
$calendar-next-icon-transform: translateX(-2px) rotate(45deg);


.mat-calendar {
  display: block;
}

.mat-calendar-header {
  padding: $calendar-padding $calendar-padding 0 $calendar-padding;
}

.mat-calendar-content {
  padding: 0 $calendar-padding $calendar-padding $calendar-padding;
  outline: none;
}

.mat-calendar-controls {
  display: flex;
  margin: $calendar-controls-vertical-padding $calendar-controls-side-margin;

  .mat-icon-button:hover .mat-button-focus-overlay {
    opacity: 0.04;
  }
}

.mat-calendar-spacer {
  flex: 1 1 auto;
}

.mat-calendar-period-button {
  min-width: 0;
}

.mat-calendar-arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: $calendar-arrow-size solid transparent;
  border-right: $calendar-arrow-size solid transparent;
  border-top-width: $calendar-arrow-size;
  border-top-style: solid;
  margin: 0 0 0 $calendar-arrow-size;
  vertical-align: middle;

  &.mat-calendar-invert {
    transform: rotate(180deg);
  }

  [dir='rtl'] & {
    margin: 0 $calendar-arrow-size 0 0;
  }
}

.mat-calendar-previous-button,
.mat-calendar-next-button {
  position: relative;

  &::after {
    @include layout-common.fill;
    content: '';
    margin: $calendar-prev-next-icon-margin;
    border: 0 solid currentColor;
    border-top-width: $calendar-prev-next-icon-border-width;
  }

  [dir='rtl'] & {
    transform: rotate(180deg);
  }
}

.mat-calendar-previous-button::after {
  border-left-width: $calendar-prev-next-icon-border-width;
  transform: $calendar-prev-icon-transform;
}

.mat-calendar-next-button::after {
  border-right-width: $calendar-prev-next-icon-border-width;
  transform: $calendar-next-icon-transform;
}

.mat-calendar-table {
  border-spacing: 0;
  border-collapse: collapse;
  width: 100%;
}

.mat-calendar-table-header th {
  text-align: center;
  padding: 0 0 $calendar-padding 0;
}

.mat-calendar-table-header-divider {
  position: relative;
  height: $calendar-header-divider-width;

  // We use an absolutely positioned pseudo-element as the divider line for the table header so we
  // can extend it all the way to the edge of the calendar.
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: -$calendar-padding;
    right: -$calendar-padding;
    height: $calendar-header-divider-width;
  }
}

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