@card-header-line-height: 27px;

/**
* Cards are used to create area separation on the main stage of the app.
*
* Make sure to use cards inside the grid for proper spacing around.
*
* Add the class `flush` to `card-body` to clear the padding.
*
* @section Cards
*/

/**
* The `card-footer` is optional and meant for supportive information like disclaimers and related info links.
*
* @section Basic Card Markup
* @sectionof Cards
* @example
* <div class="card">
*   <div class="card-header">
*     <h2 class="card-title">Card Header</h2>
*   </div>
*   <div class="card-body">
*     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil repellendus modi, quod recusandae voluptate itaque nemo laudantium asperiores odit repudiandae?</p>
*     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, voluptatum.</p>
*     <div class="row">
*       <div class="col-xs-12">
*         <p>Column</p>
*       </div>
*       <div class="col-xs-12">
*         <p>Column</p>
*       </div>
*     </div>
*   </div>
*   <div class="card-footer">
*     <p><em>Some footer text.</em></p>
*   </div>
* </div>
*/

.card {
  background-color: white;
  box-shadow: 0 1px 1px 0 @clr-shadow;
  min-height: 4em;
  width: 100%;
}

// need the :not selector to account for ng2-bootstrap panels
.card-header:not(.panel-heading) {
  background-color: @clr-title-bg;
  color: white;
  font-size: 1.2rem;
  font-weight: 300;
  .card-title {
    font-size: 1.2rem;
    margin: 0;
    padding: 0.25em 0.5em 0.37em;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    a {
      color: white;
      white-space: nowrap;
      overflow-x: hidden;
      text-overflow: ellipsis;
      span:before {
        font-size: 0.667em;
        opacity: 0.5;
        vertical-align: middle;
      }
      &:hover, &:focus {
        span:before {
          opacity: 1;
        }
      }
    }
  }
  .icon-info {
    font-size: 1rem;
    opacity: 0.7;
    cursor: pointer;
    &:hover {
      opacity: 1;
    }
  }
}

.card-body {
  padding: 0.5em 0.75em;
  &.flush {
    padding: 0;
  }
  .row {
    padding-left: 0;
    padding-right: 0;
    margin-left: -0.5em;
    margin-right: -0.5em;
  }
  .row.no-gutters {
    padding-left: 0;
    padding-right: 0;
  }
}

.card-footer {
  background-color: @clr-shade;
  border-top: 1px solid @clr-frame-lt;
  padding: 0.25em 0.75em;
}

/**
* When card content is related to a provider, add a flag to make this context clear.
* 
* __Usage:__
* - Add the class `flag` to `card-header`.
* - Add a provider flag class (e.g. `flag-benchmark`) to `card-header`.
*
* Provider Flags Available:
* - `flag-benchmark`
* - `flag-google`
* - `flag-yelp`
* - `flag-facebook`
* - `flag-foursquare`
* - `flag-twitter`
*
* @section Card Header with Flag
* @sectionof Cards
* @example
* <div class="card">
*   <div class="card-header flag flag-benchmark">
*     <h2 class="card-title">Card Header</h2>
*   </div>
*   <div class="card-body">
*     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil repellendus modi, quod recusandae voluptate itaque nemo laudantium asperiores odit repudiandae?</p>
*     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, voluptatum.</p>
*   </div>
* </div>
*/
.card-header.flag {
  position: relative;
  &:before {
    content: " ";
    font-family: "benchmark";
    font-size: 1.125em;
    color: white;
    line-height: @card-header-line-height;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 1.5em;
    padding-top: 0.125em;
    text-shadow: 0px 1px 1px @clr-shadow;
  }
  &.flag-benchmark {
    &:extend(.icon-benchmark all);
    &:before {
      background-color: lighten(@clr-title-bg, 10);
    }
  }
  &.flag-google {
    &:extend(.icon-gplus all);
    &:before {
      background-color: @clr-gplus;
    }
  }
  &.flag-yelp {
    &:extend(.icon-yelp all);
    &:before {
      background-color: @clr-yelp;
    }
  }
  &.flag-facebook {
    &:extend(.icon-facebook all);
    &:before {
      background-color: @clr-facebook;
    }
  }
  &.flag-foursquare {
    &:extend(.icon-foursquare all);
    &:before {
      background-color: @clr-foursquare;
    }
  }
  &.flag-twitter {
    &:extend(.icon-twitter all);
    &:before {
      background-color: @clr-twitter;
    }
  }
  .card-title {
    padding-left: 2.125em;
  }
}

/**
* When a card needs supporting information to the right of the header, such as a date.
*
* __Usage:__
* - Add the class `w-content` to `card-header`.
* - Add a div in `card-header` for `card-header-content`
* - You'll likely want to override the `max-width` applied to the card-title. You want it to be as wide as possible without running into the content on the right, text that goes longer than that will be truncated with an ellipsis. To set the max-width, name-space the card and apply to the `card-title`: `max-width: ~"calc(100% - 10em)";` where "10em" is a safe width away from the content on the right.
*
* @section Card Header with Supporting Information
* @sectionof Cards
* @example
* <div class="card">
*   <div class="card-header w-content">
*     <h2 class="card-title">Card Header</h2>
*     <div class="card-header-content">
*       <span class="icon-info"></span>
*     </div>
*   </div>
*   <div class="card-body">
*     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil repellendus modi, quod recusandae voluptate itaque nemo laudantium asperiores odit repudiandae?</p>
*     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, voluptatum.</p>
*   </div>
* </div>
*/
.card-header.w-content {
  .card-title {
    display: inline-block;
    max-width: 10em;
    max-width: ~"calc(100% - 10em)";
    vertical-align: top;
  }
  .card-header-content {
    display: inline-block;
    padding: 0.25em 0.5em;
    float: right;
    & > * {
      font-weight: 300;
    }
  }
}