//
// Copyright 2017 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/rtl/mixins";
@import "@material/theme/mixins";
@import "@material/typography/mixins";

$mdc-grid-list-tile-width: 200px !default;
$mdc-grid-list-tile-secondary-padding: 16px;
$mdc-grid-list-tile-secondary-padding-narrow: 8px;
$mdc-grid-list-oneline-cap-secondary-height: 48px;
$mdc-grid-list-twoline-cap-secondary-height: 68px;
$mdc-grid-list-tile-secondary-icon-size: 24px;

@mixin mdc-grid-list-tile-aspect($width-height-ratio) {
  .mdc-grid-tile__primary {
    padding-bottom: calc(100% / #{$width-height-ratio});
  }
}

@mixin mdc-grid-list-tile-gutter($gutter-width) {
  .mdc-grid-tile {
    margin: $gutter-width/2 0;
    padding: 0 $gutter-width/2;
  }

  .mdc-grid-tile__secondary {
    left: $gutter-width/2;
    width: calc(100% - #{$gutter-width});
  }

  .mdc-grid-list__tiles {
    margin: $gutter-width/2 auto;
  }
}

// postcss-bem-linter: define grid-list
@at-root {
  @include mdc-grid-list-tile-aspect(1);
  @include mdc-grid-list-tile-gutter(4px);
}

.mdc-grid-list__tiles {
  display: flex;
  flex-flow: row wrap;
  padding: 0;
}

.mdc-grid-list--tile-gutter-1 {
  @include mdc-grid-list-tile-gutter(1px);
}

.mdc-grid-list--tile-aspect-16x9 {
  @include mdc-grid-list-tile-aspect(16 / 9);
}

.mdc-grid-list--tile-aspect-3x2 {
  @include mdc-grid-list-tile-aspect(3 / 2);
}

.mdc-grid-list--tile-aspect-2x3 {
  @include mdc-grid-list-tile-aspect(2 / 3);
}

.mdc-grid-list--tile-aspect-4x3 {
  @include mdc-grid-list-tile-aspect(4 / 3);
}

.mdc-grid-list--tile-aspect-3x4 {
  @include mdc-grid-list-tile-aspect(3 / 4);
}
// postcss-bem-linter: end

// postcss-bem-linter: define grid-tile
.mdc-grid-tile {
  display: block;
  position: relative;

  /* @alternate */
  width: $mdc-grid-list-tile-width;
  width: var(--mdc-grid-list-tile-width, $mdc-grid-list-tile-width);
}

.mdc-grid-tile__primary {
  @include mdc-theme-prop(background-color, background);
  @include mdc-theme-prop(color, text-primary-on-background);

  position: relative;
  height: 0;
}

.mdc-grid-tile__primary-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.mdc-grid-tile__secondary {
  @include mdc-theme-prop(background-color, primary);
  @include mdc-theme-prop(color, on-primary);

  position: absolute;
  bottom: 0;
  box-sizing: border-box;
  height: $mdc-grid-list-oneline-cap-secondary-height;
  padding: $mdc-grid-list-tile-secondary-padding;
}

.mdc-grid-tile__title {
  @include mdc-typography-overflow-ellipsis;

  display: block;
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: #{map-get($mdc-typography-font-weight-values, medium)};
  line-height: 1rem;
}

.mdc-grid-tile__support-text {
  @include mdc-typography(subtitle1);
  @include mdc-typography-overflow-ellipsis;

  display: block;
  margin: 0;
  margin-top: 4px;
  padding: 0;
}

.mdc-grid-tile__icon {
  position: absolute;
  top: calc(50% - #{$mdc-grid-list-tile-secondary-icon-size} / 2);
  font-size: 0;
}

// stylelint-disable plugin/selector-bem-pattern
// Linter disabled because we are nesting grid-tile under grid-list.
.mdc-grid-list--twoline-caption .mdc-grid-tile__secondary {
  height: $mdc-grid-list-twoline-cap-secondary-height;
}

.mdc-grid-list--header-caption .mdc-grid-tile__secondary {
  top: 0;
  bottom: auto;
}

.mdc-grid-list--with-icon-align-start {
  .mdc-grid-tile__secondary {
    @include mdc-rtl-reflexive-property(padding, $mdc-grid-list-tile-secondary-padding * 2 + $mdc-grid-list-tile-secondary-icon-size, $mdc-grid-list-tile-secondary-padding-narrow, ".mdc-grid-list");
  }

  .mdc-grid-tile__icon {
    @include mdc-rtl-reflexive-position(left, $mdc-grid-list-tile-secondary-padding, ".mdc-grid-list");

    font-size: $mdc-grid-list-tile-secondary-icon-size;
  }
}

.mdc-grid-list--with-icon-align-end {
  .mdc-grid-tile__secondary {
    @include mdc-rtl-reflexive-property(padding, $mdc-grid-list-tile-secondary-padding, $mdc-grid-list-tile-secondary-padding * 2 + $mdc-grid-list-tile-secondary-icon-size, ".mdc-grid-list");
  }

  .mdc-grid-tile__icon {
    @include mdc-rtl-reflexive-position(right, $mdc-grid-list-tile-secondary-padding, ".mdc-grid-list");

    font-size: $mdc-grid-list-tile-secondary-icon-size;
  }
}
// stylelint-enable plugin/selector-bem-pattern
// postcss-bem-linter: end