@import "../colors";
@import "../globals";
@import "../mixins";
@import "./config";

.card {
  @include shadow-2dp();
  display: flex;
  width: 100%;
  flex-direction: column;
  overflow: hidden;
  font-size: $card-font-size;
  background: $card-background-color;
  border-radius: .2 * $unit;
  &.raised {
    @include shadow-8dp();
  }
  [data-react-toolbox="avatar"] {
    display: block;
  }
}

.cardMedia {
  position: relative;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  &.wide, &.square {
    width: 100%;
    .content {
      position: absolute;
      height: 100%;
    }
    .content > iframe, .content > video, .content > img {
      max-width: 100%;
    }
  }
  &::after {
    display: block;
    height: 0;
    content: "";
  }
  &.wide::after {
    padding-top: 56.25%;
  }
  &.square::after {
    padding-top: 100%;
  }
  .content {
    position: relative;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
  }
  .contentOverlay {
    .cardTitle, .cardActions, .cardText {
      background-color: $card-text-overlay;
    }
  }
}

.cardTitle {
  display: flex;
  align-items: center;
  [data-react-toolbox="avatar"] {
    margin-right: 1.3 * $unit;
  }
  .subtitle {
    color: $color-text-secondary;
  }
  &.large {
    padding: $card-padding-lg $card-padding ($card-padding - .2 * $unit);
    .title {
      @include typo-headline();
      line-height: 1.25;
    }
  }
  &.small {
    padding: $card-padding;
    .title {
      @include typo-body-2(false, true);
      line-height: 1.4;
    }
    .subtitle {
      font-weight: 500;
      line-height: 1.4;
    }
  }
  .cardMedia & {
    .title, .subtitle {
      color: $card-color-white;
    }
  }
}

.cardTitle, .cardText {
  padding: ($card-padding - .2 * $unit) $card-padding;
  &:last-child {
    padding-bottom: $card-padding-lg;
  }
  + .cardText {
    padding-top: 0;
  }
}

.cardActions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: $card-padding-sm;
  [data-react-toolbox="button"] {
    min-width: 0;
    padding: 0 $card-padding-sm;
    margin: 0 $card-padding-sm / 2;
    &:first-child {
      margin-left: 0;
    }
    &:last-child {
      margin-right: 0;
    }
  }
}