//
// Copyright 2019 Stijn de Witt. Some rights reserved.
// Licensed under the MIT Open Source license. 
// https://opensource.org/licenses/MIT
// See LICENSE for details.
//
// Based on code copyright 2018 Google Inc. All Rights Reserved.
// Licensed under the Apache License, Version 2.0.
// http://www.apache.org/licenses/LICENSE-2.0
// See LICENSE-MDC for details.
// 
// Unless required by applicable law or agreed to in writing, software
// distributed under these licenses is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the licenses for the specific language governing permissions and
// limitations under these licenses.
// 

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

// postcss-bem-linter: define card

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

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

//
// Media
//

.card .content {
  padding: 20px;
}

.card .media {
  @include 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;
}

.card .media:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.card .media:last-child {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

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

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

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

//
// Primary action
//

.card__primary-action {
  @include mdc-ripple-surface;
  @include mdc-ripple-radius-bounded;
  @include mdc-states;
  @include 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;
}

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

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

//
// Action row
//

.card__actions {
  @include card-actions-layout_;

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

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

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

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

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

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

//
// Action items
//

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

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

  &:focus {
    outline: none;
  }
}

//
// Action buttons
//

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

  padding: 0 8px;

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

.card__actions--full-bleed .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
//

.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-toggle.
  padding: 12px;
}

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

// postcss-bem-linter: end