// Copyright (c) 2016-2019 VMware, Inc. All Rights Reserved.
// This software is released under MIT license.
// The full license information can be found in LICENSE in the root directory of this project.

@include exports('card.clarity') {
  %card-border-appearance {
    box-shadow: $clr-card-box-shadow; //Hardcoded color not in color palette
    border-radius: $clr-global-borderradius;
    border: $clr-card-border;
  }

  %clickable-card-transition {
    box-shadow: 0 0.125rem 0 0 rgba(0, 148, 210, 1);
    border: $clr-default-borderwidth solid rgba(0, 148, 210, 1);
    cursor: pointer;
    text-decoration: none;
    transform: translateY(-2px);
    transition: border 0.2s ease, transform 0.2s ease;
  }

  %card-space-between {
    margin-top: 0;
    margin-bottom: $card-children-space-between;

    &:last-child {
      margin-bottom: 0;
    }
  }

  //Responsive Card Images
  %card-image-appearance {
    display: block;
    height: auto;
    width: 100%;
    max-width: 100%;
  }

  //TODO: Try to reduce the nesting in .card
  .card {
    position: relative;
    display: block;
    background-color: $clr-card-bg-color;
    width: 100%;
    margin-top: 1rem;
    @extend %card-border-appearance;

    .btn-link {
      min-width: 0;

      //NOTE: Set left and right padding of link buttons to 0. aligning these buttons
      //without removing the paddings is a huge task and leads to a brittle card css
      //plus the alignment doesn't work in all the cases
      padding: 0;
    }

    //Clickable Cards
    &.clickable {
      color: inherit;

      &:hover {
        @extend %clickable-card-transition;
      }
    }

    .card-title,
    .card-text,
    .card-media-block,
    .list,
    .list-unstyled {
      @extend %card-space-between;
    }

    //Clarity Lists
    & > .list,
    & > .list-unstyled {
      padding: $card-children-padding-vertical $card-children-padding-horizontal;
    }

    .list-group {
      padding-left: 0;
      margin-bottom: 0;
      list-style: none;
    }

    .list-group-item {
      padding: 0.5rem 0.75rem;
      font-size: $clr-card-text-font-size;
      background-color: $clr-card-bg-color;
      border-bottom: 1px solid $clr-card-border-color;
    }

    //Dropdowns

    //NOTE: This is a fix just for dropdowns in Cards in Edge.
    //TODO: Figure out why the caret sign is not aligned next to the dropdown toggle only in cards
    @include fixForMsEdge() {
      .dropdown > .dropdown-toggle::after {
        display: inline-block;
        margin-top: -0.5rem;
      }
    }
  }

  .card-header,
  .card-block,
  .card-footer {
    padding: $card-children-padding-vertical $card-children-padding-horizontal;
  }

  .card-header,
  .card-title {
    color: $clr-card-title-color;
    font-size: $clr-card-title-font-size;
    font-weight: $clr-card-title-font-weight;
    letter-spacing: $clr-card-title-letter-spacing;
  }

  .card-text {
    font-size: $clr-card-text-font-size;
  }

  //Images
  .card-img {
    &:first-child > img {
      border-radius: $clr-global-borderradius $clr-global-borderradius 0 0;
    }

    &:last-child > img {
      border-radius: 0 0 $clr-global-borderradius $clr-global-borderradius;
    }

    & > img {
      @extend %card-image-appearance;
    }
  }

  //Card with just an image
  .card.card-img,
  .card > .card-img:first-child:last-child {
    & > img {
      border-radius: $clr-global-borderradius;
      @extend %card-image-appearance;
    }
  }

  .card-block,
  .card-footer {
    .btn,
    .btn.btn-link,
    .card-link {
      margin: 0 $clr-btn-horizontal-margin 0 0;
    }

    //Need this level of nesting for now.
    //Adding a TODO to remove the nesting in a separate PR
    //Don't want to create a PR which solves multiple different issues.
    .btn-group .btn {
      margin: 0;
    }
  }

  .card-header,
  .card-block {
    border-bottom: $clr-default-borderwidth solid $clr-card-border-color;

    &:last-child {
      border-bottom: none;
    }
  }

  //Use border-bottom directly on card header and card block to simplify the layout
  //Card dividers should only be used inside of a .card-block
  .card-divider {
    display: block;
    border-bottom: $clr-default-borderwidth solid $clr-card-divider-color;
  }

  .card-block {
    .card-divider {
      @extend %card-space-between;
      margin-left: -1 * ($card-children-padding-horizontal);
      margin-right: -1 * ($card-children-padding-horizontal);
      width: auto;
    }
  }

  //Hide card dividers and just show the border bottom of card-header and card-block
  .card-header,
  .card-block {
    & + .card-divider {
      display: none;
    }
  }

  //Card Media Block
  .card-media-block {
    display: flex;

    .card-media-image {
      $clr-card-media-image-size: 2.5rem;
      display: inline-block; //to make sure IE10 respects the max-height and max-width
      flex: 0 0 auto;
      height: $clr-card-media-image-size;
      width: $clr-card-media-image-size;
      max-height: $clr-card-media-image-size;
      max-width: $clr-card-media-image-size;
    }

    .card-media-description {
      display: flex;
      flex-direction: column;
      margin: 0 0 0 0.5rem;
    }

    .card-media-title {
      display: inline-block;
    }

    span,
    .card-media-text {
      display: inline-block;
    }

    &.wrap {
      flex-direction: column;

      .card-media-description {
        margin: 0.25rem 0 0 0;
      }
    }
  }

  .card-block {
    & > .list,
    & > .list-unstyled {
      padding: 0;
    }
  }

  //Credit: Bootstrap 4 Card Masonry
  //Added some fixes to avoid flickering in Clickable cards
  //Added extra column classes to control the number of CSS columns
  @media screen and (min-width: map-get($clr-grid-breakpoints, sm)) {
    .card-columns {
      column-count: 3;
      column-gap: 0.5rem;
      break-inside: avoid;
      column-fill: balance;

      //Note: Safari Bug Fix for CSS Columns
      //http://stackoverflow.com/a/34998087/3538394
      -webkit-perspective: 1;

      &.card-columns-2 {
        column-count: 2;
      }

      &.card-columns-4 {
        column-count: 4;
      }

      .card {
        display: inline-block; //For some weird reason stops the cards from getting cut off between 2 columns
        margin: 0.25rem;
      }

      .clickable {
        //To fix the flickering issue with clickable card transition
        //http://stackoverflow.com/questions/3461441/prevent-flicker-on-webkit-transition-of-webkit-transform
        backface-visibility: hidden;
      }
    }
  }

  @include fixForMsEdge {
    // Edge did NOT like using display inline-table for button-groups inside of cards...
    .card {
      .checkbox,
      .checkbox-inline,
      .radio,
      .radio-inline {
        &.btn label {
          display: inline-block;
        }
      }
    }
  }
}