/**
 * Copyright 2015 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 "_variables";
@import "_categories";

$card-width: 330px;
$card-row-height: 250px; // normal mode
$card-col-height: 200px; // column mode

#cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-bottom: $keyline * 3;
}

.codelab-card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 0 $card-width;
  margin: 0 $keyline * 2 $keyline * 2 0;
  background-color: #fff;
  max-width: $card-width;
  border-radius: $radius;
  box-shadow: 0 1px rgba(0,0,0,0.15);
  border-bottom: 2px solid transparent;

  &:nth-of-type(3n) {
    margin-right: 0;
  }

  img {
    margin-right: $keyline / 2;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: $keyline * 2 $keyline * 2 0 $keyline * 2;
  }

  .card-duration {
    display: flex;
    align-items: center;
    color: #aaaaaa;
    font-size: 11px;
    padding: 0 $keyline * 2;
    mix-blend-mode: initial;
    justify-content: space-between;

    img {
      opacity: 0.24;
    }
  }

  .card-author,
  .card-updated {
    font-size: 12px;
    color: $grey400;
    line-height: 16px;
    text-align: right;
  }

  .description {
    padding: $keyline * 2 $keyline * 2 0 $keyline * 2;
    flex: 1 0 auto;
    color: #212121;
    -webkit-font-smoothing: antialiased;
  }
}

.card-footer {
  border-top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: $keyline 2 * $keyline;

  paper-button {
    @include md-font-button();
    color: #fff;
    text-transform: none;
    padding: 13px 25px;
  }

  .category-icon {
    width: 42px;
    height: 42px;
    background-size: 32px;
    background-repeat: no-repeat;
    background-position: 0 50%;
  }
}

.card-pin {
  position: absolute;
  left: 7px;
  bottom: 14px;
  width: 15px;
  height: 20px;
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml;utf8,<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h18v18H0"/><path fill="#888" d="M13 4V2H5v2h1v5l-1.5 1.5V12H8v4l1 1 1-1v-4h3.5v-1.5L12 9V4"/></g></svg>');
}

/* ***** Responsive ***** */

@media (max-width: $phone-breakpoint-max) {
  #cards {
    flex-direction: column;
    align-items: center;
  }

  .codelab-card {
    margin: 0 0 $keyline * 2;
    min-width: $card-width;
    max-width: 100%;
    width: 100%;
    flex: 1 0 $card-col-height;

    .card-header {
      align-items: center;

      .category-icon {
        margin: 0;
      }
    }
  }
}

@media (min-width: $phone-breakpoint-max) and (max-width: $desktop-breakpoint-mid) {
  .codelab-card {
    flex: 0 0 32%;
    margin: 0 2% 2% 0;
  }
}
