/*!
  *  Copyright (C) 2019 Robert Bosch GmbH Copyright (C) 2019 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
 */
@use 'sass:math';
@import '@bci-web-core/common-styles/sass/bci/bci-variables';
@import '@bci-web-core/common-styles/sass/bci/mixins/vendor-prefixes';
@import '@bci-web-core/common-styles/sass/bci/mixins/borders';

.tile {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: stretch;
  padding: $grid-size * 2;
  width: $grid-size * 34;
  height: $grid-size * 28;
  margin-bottom: $grid-size * 4;
  color: $boschBlack;

  &:hover,
  &:focus {
    background-color: $boschGray90;
    cursor: pointer;
  }

  .mat-mdc-card-content {
    padding: 0;
  }

  @include transition(all 0.25s ease);

  .title {
    display: block;
    font-size: $font-size-large;
    height: $grid-size * 6;
    margin-top: $grid-size;
    font-weight: $font-weight-medium;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: inherit;
  }

  img {
    height: 140px;
  }

  .description {
    display: block;
    font-size: $font-size-base;
    line-height: $line-height-small;
    height: $grid-size * 8;
    overflow: inherit;
    text-overflow: ellipsis;
  }

  hr.divider {
    margin: 8px 0;
    @include make-border(0 0 1px 0, $boschGray60);
    position: initial;
    width: $grid-size * 30;
  }

  &.no-image {
    .description {
      height: auto;
    }
  }

  img {
    width: 100%;
  }
}
