//
// Copyright 2016 Google Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions://
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.//
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
//

@import "@material/elevation/mixins";
@import "@material/theme/mixins";
@import "@material/ripple/mixins";
@import "@material/rtl/mixins";
@import "./mixins";
@import "./variables";

// postcss-bem-linter: define card

.mdc-card {
  @include mdc-card-fill-color(surface);
  @include mdc-card-corner-radius(2px);
  @include mdc-elevation(2);
  @include mdc-card-container-layout_;
}

.mdc-card--outlined {
  @include mdc-elevation(0);
  @include mdc-card-outline($mdc-card-outline-color);
}

//
// Media
//

.mdc-card__media {
  @include mdc-card-media-aspect-ratio-base_;

  position: relative; // Child element `__media-content` has `position: absolute`
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.mdc-card__media:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.mdc-card__media:last-child {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

.mdc-card__media--square {
  @include mdc-card-media-aspect-ratio(1, 1);
}

.mdc-card__media--16-9 {
  @include mdc-card-media-aspect-ratio(16, 9);
}

.mdc-card__media-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
}

//
// Primary action
//

.mdc-card__primary-action {
  @include mdc-ripple-surface;
  @include mdc-ripple-radius-bounded;
  @include mdc-states;
  @include mdc-card-container-layout_;

  position: relative; // Needed to prevent the ripple wash from overflowing the container in IE and Edge
  outline: none;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
}

.mdc-card__primary-action:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.mdc-card__primary-action:last-child {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

//
// Action row
//

.mdc-card__actions {
  @include mdc-card-actions-layout_;

  min-height: 52px;
  padding: 8px;
}

.mdc-card__actions--full-bleed {
  padding: 0;
}

.mdc-card__action-buttons,
.mdc-card__action-icons {
  @include mdc-card-actions-layout_;
}

.mdc-card__action-icons {
  @include mdc-theme-prop(color, text-icon-on-background);

  flex-grow: 1;
  justify-content: flex-end;
}

.mdc-card__action-buttons + .mdc-card__action-icons {
  @include mdc-rtl-reflexive-box(margin, left, 16px);
}

//
// Action items
//

.mdc-card__action {
  @include mdc-card-actions-layout_(inline-flex);

  justify-content: center;
  cursor: pointer;
  user-select: none;

  &:focus {
    outline: none;
  }
}

//
// Action buttons
//

.mdc-card__action--button {
  @include mdc-rtl-reflexive-box(margin, right, 8px);

  padding: 0 8px;

  &:last-child {
    @include mdc-rtl-reflexive-box(margin, right, 0);
  }
}

.mdc-card__actions--full-bleed .mdc-card__action--button {
  justify-content: space-between;
  width: 100%;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 8px 16px;
  text-align: left;

  @include mdc-rtl {
    text-align: right;
  }
}

//
// Action icons
//

.mdc-card__action--icon {
  // Icon toggles are taller than buttons, so we need to adjust their margins to prevent the action row from expanding.
  margin: -6px 0;

  // Same padding as mdc-icon-button.
  padding: 12px;
}

.mdc-card__action--icon:not(:disabled) {
  @include mdc-theme-prop(color, text-icon-on-background);
}

// postcss-bem-linter: end