/** Theme styles for mdCalendar. */

.md-calendar.md-THEME_NAME-theme {
  background: '{{background-A100}}';
  color: '{{background-A200-0.87}}';

  tr:last-child td {
    border-bottom-color: '{{background-200}}';
  }
}
.md-THEME_NAME-theme {
  .md-calendar-day-header {
    background: '{{background-300}}';
    color: '{{background-A200-0.87}}';
  }

  .md-calendar-date.md-calendar-date-today {

    .md-calendar-date-selection-indicator {
      border: 1px solid '{{primary-500}}'; // blue-500
    }

    &.md-calendar-date-disabled {
      color: '{{primary-500-0.6}}';
    }
  }

  .md-calendar-date-selection-indicator {
    .md-calendar-date.md-focus &,
    &:hover {
      background: '{{background-300}}';
    }
  }

  // Selected style goes after hover and focus so that it takes priority.
  .md-calendar-date.md-calendar-selected-date,
  .md-calendar-date.md-focus.md-calendar-selected-date {
    .md-calendar-date-selection-indicator {
      background: '{{primary-500}}'; // blue-500
      color: '{{primary-500-contrast}}'; // white
      border-color: transparent;
    }
  }

  .md-calendar-date-disabled,
  .md-calendar-month-label-disabled {
    // Note that this uses half the opacity of the default text color,
    // because the calendar is white, even on the dark theme, otherwise
    // the default disabled color `foreground-3` blends in with the
    // background.
    color: '{{background-A200-0.435}}';
  }
}