@import compass/utilities/color/contrast
@import compass/css3
@import ../card/card-defs

$suit_symbol_font_size: floor($base-fontSize * 0.4)
%suit_symbol
  position: absolute
  font-size: rem($suit_symbol_font_size)
  text-align: center
  line-height: 1

$chip_stack_diameter: ceil(1.3 * $card_bare_image_width)
$chip_stack_diameter-without_border: $chip_stack_diameter - 2 * $l-raisedBorder-border-width

%chip_stack_size
  height: $chip_stack_diameter-without_border
  width: $chip_stack_diameter-without_border

=chip_stack($outer_ring_color)
  @extend %chip_stack_size
  @extend %raisedBorder
  @extend %circularBorderRadius

  $outer_ring_color: saturate(darken($outer_ring_color, 2%), 100%)
  background-color: $outer_ring_color
  color: complement($outer_ring_color)

  $ring_color: lighten($outer_ring_color, 5%)
  border-color: $ring_color

  $stack_amount_font_size: $base-fontSize
  font-size: rem($stack_amount_font_size)
  font-weight: bold

  display: block

  position: relative

  .amount
    @extend %centerHorizontally
    @include align_center_vertically($stack_amount_font_size, $chip_stack_diameter-without_border)

    @include align_text_center_horizontally_and_vertically($stack_amount_font_size, $stack_amount_font_size)

    display: block

    color: black

  .inner_ring
    $inner_ring_border_width: 1px
    @include soft_edges($ring_color, $inner_ring_border_width, circular_border_radius())
    $inner_ring_margin: 6px
    $inner_ring_diameter: $chip_stack_diameter-without_border - 2 * $inner_ring_margin

    height: $inner_ring_diameter - 2 * $inner_ring_border_width
    width: $inner_ring_diameter - 2 * $inner_ring_border_width

    background-color: #fff

    margin-left: $inner_ring_margin
    margin-top: $inner_ring_margin
    margin-right: $inner_ring_margin
    margin-bottom: $inner_ring_margin

    position: absolute

  .symbols
    position: absolute
    top: 0
    width: $chip_stack_diameter-without_border
    height: $chip_stack_diameter-without_border
    .club_symbol
      @extend %suit_symbol
      right: 1%
      top: 42%
    .diamond_symbol
      @extend %suit_symbol
      left: 1%
      top: 42%
    .heart_symbol
      @extend %suit_symbol
      bottom: 0
      left: 47%
    .spade_symbol
      @extend %suit_symbol
      left: 47%
      top: -2%