bug(mat-card): buttons in mat-card-actions do not consider its align attribute

[karmasakshi]

Reproduction

StackBlitz: https://stackblitz.com/edit/components-issue-ampt5f?file=src%2Fapp%2Fexample-component.css

Steps to reproduce:

1. Add a card with 2 or more buttons in mat-card-actions
2. Inspect space between them

Actual behavior

Expected behavior

Proposed fix

Based on align=start or align=end, the first or the last button should be applied the style which is right now applied to the first button regardless:

This can be solved by the following snippet:

.mat-card-actions .mat-button,
.mat-card-actions .mat-raised-button,
.mat-card-actions .mat-stroked-button {
  margin: 0 8px !important;
}

.mat-card-actions[align="end"] .mat-button:last-child,
.mat-card-actions[align="end"] .mat-raised-button:last-child,
.mat-card-actions[align="end"] .mat-stroked-button:last-child {
  margin: 0 !important;
}

.mat-card-actions[align="start"] .mat-button:first-child,
.mat-card-actions[align="start"] .mat-raised-button:first-child,
.mat-card-actions[align="start"] .mat-stroked-button:first-child {
  margin: 0 !important;
}

Similar/related issues I found:

#18391
#13382

Environment

• Angular: 10
• CDK/Material: 10
• Browser(s): Safari, Chrome, Firefox latest
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}