@import "./card";
@import "./card.ios.vars";

// iOS Card
// --------------------------------------------------

:host {
  --background: #{$item-ios-background};
  --color: #{$card-ios-text-color};

  @include margin($card-ios-margin-top, $card-ios-margin-end, $card-ios-margin-bottom, $card-ios-margin-start);
  @include border-radius($card-ios-border-radius);

  transform: translateZ(0);

  transition: transform 500ms $card-ios-transition-timing-function;

  font-size: $card-ios-font-size;

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

:host(.activated) {
  transform: #{$card-ios-transform-activated};
}