//
// 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/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