@import "./card.native";
@import "./card.md.vars";

// Material Design Card
// --------------------------------------------------

:host {
  --background: #{$card-md-background};
  --color: #{$card-md-color};

  @include margin($card-md-margin-top, $card-md-margin-end, $card-md-margin-bottom, $card-md-margin-start);

  font-size: $card-md-font-size;

  box-shadow: $card-md-box-shadow;
}

// Card Shapes
// ---------------------------------------------

:host(.card-soft) {
  --border-radius: 4px;
}

:host(.card-round) {
  --border-radius: 12px;
}

:host(.card-rectangular) {
  --border-radius: 0px;
}