$card-link-color: color("orange", "accent-2") !default;
$card-title-color: white !default;

.card-panel {
  transition: box-shadow .25s;
  padding: $card-padding;
  margin: $element-top-margin 0 $element-bottom-margin 0;
  border-radius: 2px;
  @extend .z-depth-1;
  background-color: $card-bg-color;
}

.card {
  position: relative;
  overflow: hidden;
  margin: $element-top-margin 0 $element-bottom-margin 0;
  background-color: $card-bg-color;
  transition: box-shadow .25s;
  border-radius: 2px;
  @extend .z-depth-1;


  .card-title {
    color: $card-bg-color;
    font-size: 24px;
    font-weight: 300;
    &.activator {
      cursor: pointer;
    }
  }

  a {
    color: $card-link-color;
    margin-right: $card-padding;
    @include transition(color .3s ease);
    text-transform: uppercase;

    &:hover {
      color: lighten($card-link-color, 20%);
    }
  }

  // Card Sizes
  &.small, &.medium, &.large {
    position: relative;

    .card-image {
      overflow: hidden;
    }
    .card-content {
      overflow: hidden;
    }
    .card-action {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
    }
  }

  &.small {
    height: 365px;

    .card-image {
      height: 150px;

      img {
        height: 150px;
      }
    }

    .card-content {
      height: 150px;

      &.no-image {
        height: 300px;
      }
    }

  }

  &.medium {
    height: 465px;

    .card-image {
      height: 250px;

      img {
        height: 250px;
      }
    }

    .card-content {
      height: 150px;

      &.no-image {
        height: 400px;
      }
    }
  }

  &.large {
    height: 565px;

    .card-image {
      height: 330px;

      img {
        height: 330px;
      }
    }

    .card-content {
      height: 170px;

      &.no-image {
        height: 500px;
      }
    }
  }

  .card-image {
    position: relative;

    // Image background for content
    img {
      display: block;
      border-radius: 2px 2px 0 0;
      position: relative;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      width: 100%;
    }

    .card-title {
      position: absolute;
      bottom: 0;
      left: 0;
      padding: $card-padding;
    }

  }

  .card-content {
    padding: $card-padding;
    border-radius: 0 0 2px 2px;


    p {
      margin: 0;
      color: inherit;
    }
    .card-title {
      line-height: 48px;
    }
  }

  .card-action {
    border-top: 1px solid rgba(160,160,160,.2);
    padding: $card-padding;

    a {
      color: $card-link-color;
      margin-right: $card-padding;
      @include transition(color .3s ease);
      text-transform: uppercase;

      &:hover { color: $card-link-color-light; }
    }
  }

  .card-reveal {
    padding: $card-padding;
    position: absolute;
    background-color: $card-bg-color;
    width: 100%;
    overflow-y: auto;
    top: 100%;
    height: 100%;
    z-index: 1;
    display: none;

    .card-title {
      cursor: pointer;
      display: block;
    }

  }
}