// Import all the tools needed to customize the theme and extract parts of it
// @import '~@angular/material/core/theming/all-theme';
@import '../../all-theme';

// Define a mixin that accepts a theme and outputs the color styles for the component.
@mixin ap-card-theme($theme) {
  // Extract whichever individual palettes you need from the theme.
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);

  $image-max-height: 280px;

  md-card[ap-card] {
    font-family: "Open Sans";
    letter-spacing: 0.3px;
    padding: 24px;
    padding-bottom: 20px;
    margin-bottom: 25px;

    &.inset {
    }
    &[tall] {
      height: 100%;
      margin: 0;
      &.user-info {
        text-align: left;
        md-card-content {
          float: left;
          padding: 0 10px;
          margin-top: auto;
          width: 70%;
          word-wrap: break-word;
          md-card-title {
            font-size: 16px;
            color: #4A4A4A;
          }
          md-card-subtitle {
            font-size: 13px;
            color: $item-text-color;
            margin-bottom: auto;
          }
          md-divider {
            margin: 10px 0;
          }
        }
        [ap-avatar] {
          float: left;
          margin: 0 auto;
        }
        .social-icons {
          padding: 0;
          margin-top: 35px;
        }
      }
    }

    md-card-header {
      height: auto;
      margin-bottom: 0;
      margin: 0;
      .md-card-header-text {
        width: 100%;
        height: auto;
        overflow: hidden;
        margin: 0 15px;
      }
      md-card-title {
        font-size: 11px;
        color: md-color($md-ap-dark-grey, 500);
        margin-bottom: 13px;
        display: flex;
        justify-content: space-between;
        white-space: nowrap;
        .actions {
          margin-left: 15px;
          cursor: pointer;
        }
      }
      md-card-subtitle {
        font-family: "Open Sans";
        letter-spacing: 0.3px;
        font-size: 13px;
        margin-bottom: 0;
      }
    }
    md-card-content {
      margin-top: 15px;
      [md-card-image] {
        max-height: $image-max-height;
        overflow: hidden;
        width: 100%;
        margin: 0 auto;
        img { width: 100%; }
      }
      div {
        &.social-info,
        &.status-info {
          margin-top: 11px; margin-bottom: 0;
          [ap-chip-status] {
            padding-left: 55px;
          }
        }
        &.social-info {
          font-family: "Open Sans";
          font-size: 13px;
          span {
            color: #7D93A0;
            margin-right: 15px;
          }
        }
      }
      [ap-input][textarea] {
        width: 100%;
      }
    }
    md-card-footer {
      border-top: 1px solid $color-border;
      margin-top: 20px;
      display: flex;
      align-items: center;
    }
    &.parent-card {
      margin-top: 0;
      margin-bottom: 15px;
      md-card-header md-card-subtitle {
        font-family: "Hind";
        letter-spacing: 0.5px;
        font-size: 16px;
        color: md-color($md-ap-dark, 500);
        .md-card-header-text { margin: 0px 15px; }
      }
    }
    &.children-card {
      width: 100%;
      padding: 15px 20px;
      md-card-content { margin-top: 0; }
    }
    &.quick-reply-card {
      width: 100%;
      md-card-content { margin-bottom: 48px; }
      md-card-footer {
        height: 48px;
        justify-content: space-between;
        [ap-button][bar-button] { flex: 1; }
      }
      .status-info {
        display: flex;
        align-items: center;
        margin-top: 11px;
        padding-left: 45px;
        .info {
          line-height: 17px;
          .likes {
            font-size: 13px;
            color: $item-text-color;
            .like-count { color: #5C9FEC; }
          }
          .actions {
            font-size: 11px;
            margin-top: 3px;
            &, a { color: $color-placeholder; }
          }
        }
        [ap-button] {
          padding: 0 11px;
        }
      }
      [ap-input][textarea] {
        margin-top: 15px;
      }
    }
  }

}