@import 'compass';
@import 'card-defs';

@import '../abstract/cards-defs';

@mixin set_card_color($color) {
   @include soft_edges($color, 1px, $default_border_radius, outset);

   $dark_color: darken($color, $card_color_variation_amount);
   $light_color: lighten($color, $card_color_variation_amount);
   @include background-image(linear-gradient(top, $light_color, $dark_color));
   background-image: -ms-linear-gradient(top, $light_color, $dark_color);

   .suit {
      color: darken($color, $card_color_variation_amount);
   }
}

.card {
   @include zen-grid-container;

   $blank_card_color: $triad-color-3;
   @include set_card_color($blank_card_color);

   height: $card_height;
   width: $card_width;

   position: relative;

   color: #fff;

   $card-column-count: 2;
   @include parent_grid($card-column-count, $l-card-margin);

   .top_left_rank {
      @include zen-grid-item(1, 1);

      line-height: 1;
      font-size: rem($base-fontSize - 4);

      margin-top: $l-card-margin;
   }
   .suit {
      @include zen-grid-item(1, 2);

      line-height: 1;
      text-align: right;
      font-size: rem($base-fontSize * 1.2);
   }
   .bottom_right_rank {
      @include zen-grid-item($card-column-count, 1);
      @include zen-clear;

      line-height: 1;
      text-align: right;
      font-size: rem($base-fontSize * 2);

      margin-top: $l-card-margin;
   }
   @include background-image(linear-gradient(top left, darken($blank_card_color, 25%), $blank_card_color));

   .logo {
      // Include card logo like this:
      @include background-image(image-url('nick_morrill/chip_background.foggy.jpg'));

      height: $card_height;

      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
   }

   &#c {
      @include set_card_color(#107010);
   }
   &#d {
      @include set_card_color(#2020A0);
   }
   &#h {
      @include set_card_color(#B00101);
   }
   &#s {
      @include set_card_color(#303030);
   }
}