// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
// Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy
// of the license at https://github.com/palantir/blueprint/blob/master/LICENSE
// and https://github.com/palantir/blueprint/blob/master/PATENTS

@import "../../common/variables";

/*
Cards

Markup:
<div class="pt-card {{.modifier}}">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec dapibus et mauris,
  vitae dictum metus.
</div>

.pt-elevation-0 - Ground floor. This level provides just a gentle border shadow.
.pt-elevation-1 - First. Subtle drop shadow intended for static containers.
.pt-elevation-2 - Second. An even stronger shadow, moving on up.
.pt-elevation-3 - Third. For containers overlaying content temporarily.
.pt-elevation-4 - Fourth. The strongest shadow, usually for overlay containers on top of backdrops.

Styleguide pt-card
*/

$card-padding: $pt-grid-size * 2 !default;

$card-background-color: $white !default;
$dark-card-background-color: $dark-gray4 !default;

$elevation-shadows: (
  $pt-elevation-shadow-0
  $pt-elevation-shadow-1
  $pt-elevation-shadow-2
  $pt-elevation-shadow-3
  $pt-elevation-shadow-4
);
$dark-elevation-shadows: (
  $pt-dark-elevation-shadow-0
  $pt-dark-elevation-shadow-1
  $pt-dark-elevation-shadow-2
  $pt-dark-elevation-shadow-3
  $pt-dark-elevation-shadow-4
);

.pt-card {
  border-radius: $pt-border-radius;
  box-shadow: $pt-elevation-shadow-0;
  background-color: $card-background-color;
  padding: $card-padding;
  transition: transform ($pt-transition-duration * 2) $pt-transition-ease,
              box-shadow ($pt-transition-duration * 2) $pt-transition-ease;

  &.pt-dark,
  .pt-dark & {
    box-shadow: $pt-dark-elevation-shadow-0;
    background-color: $dark-card-background-color;
  }
}

@for $index from 1 through length($elevation-shadows) {
  .pt-elevation-#{$index - 1} {
    box-shadow: nth($elevation-shadows, $index);

    &.pt-dark,
    .pt-dark & {
      box-shadow: nth($dark-elevation-shadows, $index);
    }
  }
}

/*
Interactive cards

Markup:
<div class="docs-card-example">
  <div class="pt-card pt-elevation-0 pt-interactive">
    <h5><a href="#">Trader Profile</a></h5>
    <p>Overview of employee activity, including risk model, scores and scenario alert history.</p>
  </div>
  <div class="pt-card pt-elevation-1 pt-interactive">
    <h5><a href="#">Desk Profile</a></h5>
    <p>Desk-level summary of trading activity and trading profiles.</p>
  </div>
  <div class="pt-card pt-elevation-2 pt-interactive">
    <h5><a href="#">Dataset Dashboards</a></h5>
    <p>Stats of dataset completeness and reference data join percentages.</p>
  </div>
</div>

Styleguide pt-card.pt-interactive
*/

.pt-card.pt-interactive {
  &:hover {
    box-shadow: $pt-elevation-shadow-3;
    cursor: pointer;

    &.pt-dark,
    .pt-dark & {
      box-shadow: $pt-dark-elevation-shadow-3;
    }
  }

  &:active {
    opacity: 0.9;
    box-shadow: $pt-elevation-shadow-1;
    transition-duration: 0;

    &.pt-dark,
    .pt-dark & {
      box-shadow: $pt-dark-elevation-shadow-1;
    }
  }
}