@import 'settings';

// Card
//
// The card is a very basic element that we see a lot in Open social.
// It is the most basic way of structuring content into sections.
// A card is elevated (through `box-shadow` property) one level from the canvas.
// It will also have a `background-color` and `border-radius`.
//
// **Card title**
//
// A card can have a title to display what the card is about.
// Add `.card__title--underline` for a border on the head.
// Add a child `<div class="card__subtitle">` for a subtitle.
//
// **Card block**
//
// The default way of structuring content in a card is by placing
// it in a `.card__block`.
//
// **Card body**
//
// Add `.card__body` to double the padding of the card. This is
// primarily used for articles.
//
// **Card actionbar**
//
// The actionbar is reserved for actions the user can perform in the card.
// In most cases there will be buttons, but there can also be badges in here.
//
// .card__block - Card block
// .card__body - Card body
//
// markup: card.twig
//
// Style guide: atoms.card


// Card nested section
//
// To display a distinguished section in a card, you can used a inner wrapper
// with `.card__nested-section`. This will undo the padding and there is a
// subtle gray background color added.
//
// markup: card-nested-section.twig
//
// Weight: 1
//
// Style guide: atoms.card.nest-section


.card {
  @include z-depth-2;
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: $card-spacer-x;
  background-clip: padding-box;

  // IE Fix: Default flex values for <IE11 is `flex: 0 0 auto` while other
  // browsers and the spec says `flex: 0 1 auto`. We make it compliant here.
  flex-grow: 1;
}

.card__title {
  position: relative;
  vertical-align: middle;
  margin: 0;
  padding: 15px $card-spacer-x 0;
  line-height: 1;
  font-size: 1rem;
}

// The card title on the summary collapse block.
summary.card__title {
  padding-bottom: 15px;
}

.card__subtitle {
  font-size: 0.75rem;
  display: block;
}

// This style can be used to separate the card title from the card body.
.card__title--underline {
  border-bottom: 1px solid $gray-lighter;
  padding-bottom: 15px;
}

// Default block inside a card.
.card__block {
  position: relative;
  // Enable `flex-grow: 1` for decks and groups so that card blocks take up
  // as much space as possible, ensuring footers are aligned to the bottom.
  flex: 1 1 auto;
  padding: $card-spacer-x;

  & + .card__block {
    padding-top: 0;
  }
}

.card__block--list:not(:first-child) {
  padding-top: 0;
}

.card__block--list:not(:last-child) {
  padding-bottom: 0;
}


.card__body {
  position: relative;
  padding: $card-spacer-x;

  [dir='rtl'] & {
    text-align: right;
  }

  @include for-tablet-landscape-up {
    padding: $card-spacer-xl;
  }
  .twitter-tweet,
  .fb_iframe_widget,
  iframe {
    max-width: 100% !important;
    width: 100% !important;
  }
}

// section inside card, such as comments
.card__nested-section {
  margin-top: ($card-spacer-x/2);
  margin-right: -$card-spacer-x;
  margin-bottom: -$card-spacer-x;
  margin-left: -$card-spacer-x;
  padding: $card-spacer-x;
  background: $gray-lighter-1;
  border-top: 1px solid $gray-lighter;
}

.card__actionbar {
  @include clearfix; // links inside float
  margin-top: -$card-spacer-x;
  padding: $card-spacer-x;
  position: relative;
  z-index: 1;
}

.card__link {
  font-size: 0.875rem;
  margin-left: 24px;
  float: right;
  transition: color .3s ease;

  [dir='rtl'] & {
    float: left;
    margin-left: 0;
    margin-right: 24px;
  }
}

.card__text {
  margin-top: 0;

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

}

.leaflet-popup-content .card__block {
  padding: 0;
}

.card--stream .card__block .card__nested-section {
  padding-top: ($card-spacer-x/2);
}

// Info tab on the group page.
.block-views-blockgroup-managers-block-list-managers,
.view-group-information,
.block-social-group-tags-block {
  .card,
  &.card {
    > .card__title {
      text-align: center;
    }
  }
}
