@use "../../themes/ionic/ionic.globals.scss" as globals;
@use "./card.common";

// Ionic Card
// --------------------------------------------------

:host {
  --background: #{globals.$ion-bg-surface-default};
  --border-width: #{globals.$ion-border-size-025};
  --border-color: #{globals.$ion-border-default};
  --border-style: #{globals.$ion-border-style-solid};
  --border-radius: #{globals.$ion-round-xl};
  --color: #{globals.$ion-text-default};
  min-width: globals.$ion-scale-2400;

  border: var(--border-width) var(--border-style) var(--border-color);
}

::slotted(img) {
  display: block;
}

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

:host(.card-soft) {
  --border-radius: #{globals.$ion-soft-xl};
}

:host(.card-round) {
  --border-radius: #{globals.$ion-round-xl};
}

:host(.card-rectangular) {
  --border-radius: #{globals.$ion-rectangular-xl};
}