//
// 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 "./variables";

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

@mixin mdc-image-list-corner-radius($radius) {
  .mdc-image-list__image {
    border-radius: $radius;
  }

  .mdc-image-list__supporting {
    border-radius: 0 0 $radius $radius;
  }
}

// Standard Image List

@mixin mdc-image-list-standard-columns($column-count, $gutter-size: $mdc-image-list-standard-gutter-size) {
  // This uses margin rather than padding to facilitate properly positioning the supporting content element when
  // --with-text-protection is used.
  .mdc-image-list__item {
    // Subtract extra fraction from each item's width to ensure correct wrapping in IE and Edge which round differently
    width: calc(100% / #{$column-count} - #{$gutter-size + 1 / $column-count});
    margin: $gutter-size / 2;
  }
}

// Masonry Image List

@mixin mdc-image-list-masonry-columns($column-count, $gutter-size: $mdc-image-list-masonry-gutter-size) {
  column-count: $column-count;
  column-gap: $gutter-size;

  .mdc-image-list__item {
    margin-bottom: $gutter-size;
  }
}