mat-card{
  background-color: var(--color-surface-neutral-idle) !important;
  padding: var(--spacing-small);
  box-shadow: var(--elevation-low) !important;
  border-radius: var(--border-radius-interface) !important;
  transition: box-shadow 100ms ease-in-out;
  mat-card-header{
    padding: 0 !important;
    width: 100%;
    align-items: flex-start;
  }
  mat-card-title{
    font-weight: var(--font-weight-700) !important;
    font-size: var(--font-size-m) !important;
  }
  mat-card-subtitle{
    color: var(--color-on-surface-neutral-secondary) !important;
    font-size: var(--font-size-s) !important;
  }
  mat-card-actions{
    margin-left: auto;
    min-height: auto !important;
    padding: 0 !important;
    button{
      margin-left: 4px;
    }
  }
  mat-card-content{
    padding: 0 !important;
  }
}

/* Nested card */

mat-card.card-nested{
  box-shadow: none !important;
  background-color: var(--color-surface-neutral-nested) !important;
}

/* Nested card */

mat-card.selectable-card{
  box-shadow: inset 0 0 0 1px var(--color-surface-alt-disabled) !important;
  background-color: var(--color-surface-neutral-idle);
  cursor: pointer;
  &:hover{
    box-shadow: inset 0 0 0 1px var(--color-surface-alt-hover) !important;
  }
  &:active{
    box-shadow: inset 0 0 0 1px var(--color-surface-alt-press) !important;
  }
  &.nested{
    background-color: var(--color-surface-neutral-nested) !important;
    box-shadow: inset 0 0 0 1px var(--color-surface-alt-disabled) !important;
    &:hover{
      box-shadow: inset 0 0 0 1px var(--color-surface-alt-hover) !important;
    }
    &:active{
      box-shadow: inset 0 0 0 1px var(--color-surface-alt-press) !important;
    }
  }
  &.selected{
    box-shadow: inset 0 0 0 2px var(--color-surface-brand-idle) !important;
    &:hover{
      box-shadow: inset 0 0 0 2px var(--color-surface-brand-hover) !important;
    }
    &:active{
      box-shadow: inset 0 0 0 2px var(--color-surface-brand-press) !important;
    }
  }
}