@import "../settings/variables";

.card {
  background-color: $card-background-color;
  border-radius: $card-border-radius;
  box-shadow: $card-shadow;
  transition: box-shadow 0.2s ease-in-out;

  &--level-10 {
    box-shadow: shadow(10);
  }

  &--level-20 {
    box-shadow: shadow(20);
  }

  &--level-30 {
    box-shadow: shadow(30);
  }

  &--level-40 {
    box-shadow: shadow(40);
  }

  &--level-50 {
    box-shadow: shadow(50);
  }

  &--hoverable:hover {
    box-shadow: shadow(40);
  }
}