// 
// Copyright 2016 Google Inc. All Rights Reserved.
// 
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
// 
//      http://www.apache.org/licenses/LICENSE-2.0
// 
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//

@import "@material/elevation/mixins";
@import "@material/theme/mixins";
@import "@material/typography/mixins";

// postcss-bem-linter: define card
.mdc-card {
  @include mdc-elevation(2);

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0;
  box-sizing: border-box;

  &__primary {
    padding: 16px;

    // Add extra space before large title.
    .mdc-card__title--large {
      padding-top: 8px;
    }

    // Add extra padding if this is the last block.
    &:last-child {
      padding-bottom: 24px;
    }
  }

  &__supporting-text {
    padding: 8px 16px;
    box-sizing: border-box;

    @include mdc-typography(body1);
    @include mdc-theme-prop(color, text-primary-on-background);

    @include mdc-theme-dark(".mdc-card") {
      @include mdc-theme-prop(color, text-primary-on-dark);
    }

    // Remove top padding if immediately preceded by a primary block.
    .mdc-card__primary + & {
      margin-top: -8px;
      padding-top: 0;
    }

    // Add extra padding if this is the last block.
    &:last-child {
      padding-bottom: 24px;
    }
  }

  &__actions {
    display: flex;
    padding: 8px;
    box-sizing: border-box;

    // Adjust text color for dark theme.
    @include mdc-theme-dark(".mdc-card") {
      @include mdc-theme-prop(color, text-primary-on-dark);
    }

    // Tweak button paddings and margins when they're used as actions
    .mdc-card__action {
      margin: 0 8px 0 0;
    }

    .mdc-card__action:last-child {
      margin-right: 0;
    }

    // Vertical actions (one per line)
    &--vertical {
      flex-flow: column;
      align-items: flex-start;

      .mdc-card__action {
        margin: 0 0 4px;
      }

      .mdc-card__action:last-child {
        margin-bottom: 0;
      }
    }
  }

  &__media {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px;
    box-sizing: border-box;
  }

  &__media-item {
    display: inline-block;
    width: auto;
    height: 80px;
    margin: 16px 0 0;
    padding: 0;

    @each $mult, $name in (1.5: "1dot5", 2: "2", 3: "3") {
      // postcss-bem-linter: ignore
      &--#{$name}x {
        width: auto;
        height: $mult * 80px;
      }
    }
  }

  &__title {
    @include mdc-typography(body2);
    @include mdc-theme-prop(color, text-primary-on-background);

    // Adjust text color for dark theme.
    @include mdc-theme-dark(".mdc-card") {
      @include mdc-theme-prop(color, text-primary-on-dark);
    }

    margin: -.063rem 0; // -1sp 0
  }

  &__title--large {
    @include mdc-typography(headline);

    margin: 0;
  }

  &__subtitle {
    @include mdc-typography(body1);
    @include mdc-theme-prop(color, text-primary-on-background);

    // Adjust text color for dark theme.
    @include mdc-theme-dark(".mdc-card") {
      @include mdc-theme-prop(color, text-primary-on-dark);
    }

    margin: -.063rem 0; // -1sp 0
  }

  &__horizontal-block {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0 16px 0 0;
    box-sizing: border-box;

    // postcss-bem-linter: ignore
    .mdc-card__actions--vertical {
      margin: 16px;
    }

    .mdc-card__media-item {
      margin-left: 16px;
    }

    // postcss-bem-linter: ignore
    .mdc-card__media-item--3x {
      margin-bottom: 16px;
    }
  }
}

// postcss-bem-linter: end